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木书的主题是 Windows 8应用程序开发。 

在阅读木 书前， 需要一台运行 Windows 8的计算机并安装 Windows 8开发工具和软件 
开发包 ( SDK ), JS 简中-的办法是 K 载免费的微软 Visual Studio Express 2012 for Windows 8。 

卜•.战地址可以从 Windows 8开发者中心获得： http :// msdn . microsoft . com / windows / apps 。 简 
体中文版下载地址： http :// dev . windows . com / zh - cn /。 

要安装 Visual Studio , 请申.击页面上的“下载 I - 具”连接，然后选择“査找 Visual 
Studio 的其他版 本”。 开发者中心主页还提供了注册 Windows 8开发者账号和向 Windows 
Store 提交应用程序的相关帮助。 


Windows 8的版本 

Windows 8基本上与 Windows 7类似，两者都可以运行于同类个人计算机，拥有32位 
和64位 Intel x 86 微处现器系列的 i 十算机 。 Windows 8有一个是标准版本 Windows 8. 另外 
还有一个版本 Windows 8 Pro , 功能更多，针对的是技术爱好者和专业人上。 

Windows 8和 Windows 8 Pro 都可以运行两种程序： 

• 桌面应用程序 

• Windows 8应用程序，往往也称为 “ Windows 应用商店应用程序” 

桌面应用程序是指传统的 Windows 程序，这些应用程序可以运行于 Windows 7. 通过 
Windows 应用程序编程接口 ( Win 32 APl ) ij 操作系统交互。为运行这些桌而应用程序. 
Windows 8提供了人们熟悉的 Windows 桌面界面。 

Windows 应用程序打破了传统 Windows 的一贯风格。这种应用程序一般在全屏模式卜' 
运行(但两种应用程序可以通过辅屏视图在同一个屏幕上显示)，专 fj 为触換和平板汁算机 
优化。这些应用 程序吋 以从微软运营的应用商店进行购买和安装。（开发#玎以宵 接通过 
Visual Studio 进行部署和测试。） 

除了运行在 x 86 处理器上的 Windows 8版本 , Windows 8还有一个版本运行在 ARM 处 
理器 h 。 这种处理器常见于廉价平板汁算机和其他移动设备。此版本的 Windows 8称为 
Windows RT . 都已经预装在这些设备上。最早运行 Windows RT 的计算机是微软 Surface 。 

Windows RT 除了预装的桌面应用程序只能运行 Windows 应用程序。我们不能在 
Windows RT I :运行现有的 Windows 7应用程序，包括 Visual Studio , 因而+能在 Windows 
RT 上开发 Windows 8应用程序。 

Windows 8用户界血采用了新的设计范式，与 Windows 应用程序的风格协调一致。受 
到都市标志的扁发，这种设计范式通过卨反差来突出内容，采用朴崇的字体，具有简明的 
风格和榷丁•磁贴 ( tile ) 的界面，并伴随过渡动 ffli 效果。 

许多开发者 最初 是通过 Windows Phone 7认识的 Windows 8设汁范式，可见微软对小 



尺、 t 和大尺寸计算机均做了精心设计。过去的几年中，微软试图使传统 Windows 桌面史适 
合小哦设备(如手持计算机和手 机)。 如今，手机的用户界 Ifri 设计理念 LL 被带电平板和桌曲。 

这个令新的设汁更注電多点触換 ( multitoudi ), 这种操作方式在很大程度上改变了人机 
之间的关系。事实上，多点触換这个词匕经有些过时了，闵为 几乎所 有新的触換设备都能 
够响应多手指操作。闵此直接用“触換”便足以表达这个意思了。针对 Windows 8应用程 
序的部分编程接口用一致的方式融合了触摸、鼠标和触笔输入，因而 " J " 以轻松通过这飞种 
输入设备来使用应用程序。 

本书要点 

木书主要介绍 Windows 应用商店应用程序的开发。有许多介绍 Win 32 桌面应用程序 
开发的图书，其中包括 《 Windows 程序设 i | •(第5版 )》 。木15偶尔会提到 Win 32 API 和桌 
面应用程序，似会将重点放在 Windows 8应用程序的开发1.» 

为 : T 编写这种应用程序，微软引入了一种全新的曲向对象 API . 称为 Windows 运行时 
(Windows Runtime ) 或 WinRT (清勿运行在 ARM 处理器卜.的 Windows 8版木 Windows RT 
相混 济)。 Windows 运行时内部堪丁-组件对象模咽 (Component Object Model . COM ), 通过 
/ Windows / System 32 /WinMetadata |丨决卜扩展名为 . winmd 的元数扼文件向外祕露接口。从外 
部看，这套 API 完全是面向对象的。 

从应用程序开发者•的角度看， Windows 运行时集成/ Silverlight , U API 内部并+是 
托管的。对丁 - Silverlight 开发者而言，最直接的变化或许是命名空 间： Silverlight 的命名空 
间以 System . Windows 开头，新 API 的命名空间将其好换为 Windows . UI.XamU 

大部分 Windows 8应用程序不仅由代码构成，还包含标记。这些标记吋能是工业标准 
化的超文本标记语吉 (HyperText Markup Language . HTML ). 也 " j _ 能是微软的扩展应用程 
序标记语言 (extensible Application Marloip Language , XAML )。 将代码~标 id 分离的好处之 
一是将编码人员勺界面设计人员的工作分离。 

U 前，开发 Windows 8应用程序的技术主要有3种编程语言和标记语言的组合可供 
选择。 

• C ++ 与 XAML 

• C#/Visual Basic 与 XAML 

• JavaScript 与 HTML 5 

对以上三种组合均吋以使用 Windows 运行时，但 Windows 运行时为不冋语言提供 f 
相应的编程接口。虽然我们不能在同一个项目中混用不同的语言，但以通过创建一种带 
有 . winmd 扩展名的库 ( Windows 运行时组件)来实现。这种库可以通过任何 Windows 8语言 
访问。 

C ++ 程序员可以使用一种 C ++ 的分支 C ++ 组件扩展或 C ++/ CX 。 这祌扩展使得该语 R 能 
够史好地利用 WinRT 。 C ++ 程序员 nj 以直接访问部分 Win 32 和 COM API , 也可以访问 
DirectX 。 此外， C ++ 程序可以被编译为本地机器代码。 

使用托管语言 C # 或 Visual Basic . NET 的程序员很容易上手 WinRT 。 使用此类编 
写的 Windows 8应用程序+能像 C + +程序那忭轻松地访问 Win 32、 COM 或 DirectX API , 



但 也是吋 以的。本书第15章提供 r 几个相关示例 程序。 WinRT 还提供了一个简化的 .NET 
基础类库，用于完成一些底层任务。 

针对 JavaScript . Windows 运行时提供了 Windows Library for JavaScript 或简称 WinJS . 
使得 W JavaScript 编写的 Windows 8 程序能够调用 l 午多系统级的功能。 

经过愤甫考虑，我决定在15中主要使用 C # 和 XAML 介绍相关技术。托管语言在幵发 
和调试 上的优 势说服/我，并且我认为 C#'j Windows 运行时最为匹配。希頊 C ++ 程序员 
能够快速熟悉 C # 代码，从本彳5得到更多收获。 

肯定还有其他很多 Windows 8图书介绍如何使用其他语言来编写 Windows 8应用程 
序。但我认为，一木书重点介绍一种语言比尝试冋时涵盖多种语言史有价值。 

+过，鉴 ： T C ++ 和木地代码在高性能应用中的优势，我还是非常很愿意展开新一轮的 
H 论。没有哪种 II 具能够解决任何问题。未来，我会在自己的博客和进- 
步讨论针对 Windows 8的 C ++ 和 DirectX 开发。本书 fld 套内容中的示例程序都配有对应的 
C ++ 版本。 

循序渐进 

在阅读木书之前.需要举握必耍的预备知识。首先要熟悉 C #。 如果对此知之甚少，逑 
议在阅读木 1 D 之前先学习 C #。 如果在学习 C # 之前有 C 或 C ++ 背擻， 吋以阅 读免费的电子 
UNET Book Zero : What the C or C ++ Programmer Needs to Know About C # and the .NET 
Frameworko 该_择有 PDF 和 XPS 两种格式可供下战，地址为 www . charIespetzold . com / dolnet » 

木书假定你 T 解 XMLK 扩展标记语言)的基本语法，闵为 XAML 本身也是一种 XMLo 
但木书假定你+熟悉 XAML 和任何基于 XAML 的编程接口。 

木15 是- 本 API 参考书，不是编程工具参考书。本人唯一使用的编程 t 具是 Microsoft 
Visual Studio Express 2012 for Windows 8( 本 15 —般简称为 Visual Studio )。 

相比程序代码，标记语言•般史受丄具的广泛支持。 U 实上，有些开发# M 至认为 
XAML 这样的标记语言完全应该自动生成 。 Visual Studio 内建 uj •交互的 XAML 设器，我 
们吋以将控件拖拽至页面。许多开发#逐渐熟悉并喜欢使用 Microsoft Expression Blend 来 
为他们的应用程序牛成复杂的 XAML。Microsoft Expression Blend 包含/|•:前血提到的幵发 
工具和 SDK ■中。 

这种设汁工具非常适合有经验的幵发者，我认为新手最好从手 I . 编％ XAML 学起。这 
也正是木书介绍 XAML 的过程。第8章介绍的 XAML Cruncher T 具正好印证了一个 观点： 
虽然它能够在你输入 XAML 的过程中牛成相应的对象，何+能为你写 XAML 代码。 

也千万+要走向另一个极端。冇的幵发者非常善亍写 XAML , 以至于忘记如何在代码 
中创建和初始化相应的对象！我认为两者都很®耍，因此本书将分别介绍如何用代码和标 
记来完成类似的任务。 

在开始写本 IS 之前，我构思/几种介绍 Windows 运行时的方案。一种方案是从底展图 
形 1 - j 用户输入开始，演示控件的构迮方法，然后介绍现有的控件。 

但我 S 终选择首先介绍对主流开发者最重要的几种 技术： 在应用程序中组合预定义的 
控件，然后通过代码和数据 将这❷ 控件联系在一起。这就是本书第 I 部分(也就是前12章) 


的主耍 内容。 

第 II 部分主要介绍底层及较为具体的功能，其中包括触換、位图、富文本、打印以及 
屏擦方向和 GPS 传感器。 

配套内容 

学习新的 API 和学习打篮球与吹奏双簧管非常类似。旁观是很难学会的，必须 
亲自上手。本配套的源代码可以通过 Companion Content 链接下载，网址为 
https :// www . microsoftpressstore . com / store / programming - windows -9780735671 768。 

虽然有现成的代码，但最好自己键入代码，效果会更好一些。 

计算机配置 

为广写这木 I ?,我用的是三星平板电脑 700 T 的-个特殊版本。这款平板是201丨年9 
月的 Microsoft 在 Build 大会上为参会人员提供的。因此，这款平板也有时称为 Build 平板。 
这款平 板汁算 机配备 1.6 GHz 的 Intel Core i 5 处理器，拥有64 GB 的硬盘，屏幕支持8点触 
換，分辨率为1366 X 768像素(本书绝大部分截图采用的是这个分辨 率)， 是辅屏视图模式 
的最低要求。 

里然这个 Build 平板预装的是 Windows 8的幵 K 者预览版 (Developer Preview ), 但随着 
时间的推移,我依次安装了 2012年3月公布的消费荠预览版 (Consumer Preview , build 8250)、 
2012年6月的发行预览版 (Release Preview , build 8400), M 终安装的是 Windows 8 Pro 的正 
式发行版。除 T 测试方向传感器外，我一般都通过底座的 HDMI 接口将这台平板连到 
1920 X 1080分辨率的外部显示器，并使用外接键盘和鼠标。 

微软的 Surface 平板电脑一 h 市，我就购买拉一台，用于程序测试。为了在 Surface 上 
部署和调试应用程序，我采用了 Tim Heuer 在博客中介绍的一种技术，网址为 
http :// timheuer . com / blog / archive /2012/10/26/ remote - debugging - windows - store - apps - on - surface - 
arm - devices . aspxo 这种技术在文档中的 HI 式描述为：“在远程计算机 h 从 Visual Studio 运 
行 Windows 应用商店应用” ( http :// msdn . microsoft . com / zh - cn / library / hh 441469. aspx )» 

在测试用到方向传感器的程序来时，采用 Surface 这样的物理平板设备是很有必要的。 
大部分情况下，我使用的都是插在底座 h 的 Build 平板。通过外部的键盘、鼠标和显 
小器，我吋以像以往那柞使用微软 Visual Studio 和 Word , 而让 Windows 8程序在带有触換 
屏的'1' : 板1=运行。这样的开发环境我感到非常满意，尼其是和我当年写 《 Windows 程序设 
i 十(第丨版)》时使用的配置相比。 

不过，那已经是25年前的車了。 

本书的前世今生 

本15是 《 Windows 程序设计》的第6版。第1版是1986年受微软出版社的委托写的。 
之所以收到这个邀沾，是 W 为我当时在为 Microsoft Systems Journal(MSDN Magazine 的前身) 




写 Windows 编程系列文章。 
那份合同我至今记忆犹新。 
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最值得一提的是它首页下部的一段。 



typescript (打字稿)这个词意味着，稿件至少要用打字机打印。要求规定/手稿使用双倍 
行距、固定字宽，每页大概有250个字。页数在400左右，也就是说微软出版社+ 希翅内 
容太多。 

为了写这本书，我采用了一台 IBM PC / AT 计算机，它采用8 MHz 的80286微处理器、 
512 KB 的内存和30 MB 的硬盘。示器为16色的 IBM Enhanced Graphics Adapter , 最大 
分辨率为 640 X 350。 写前面几章时用的是 Windows 1(1985 年11月发行的)，后来用上了 
Windows 2的 beta 版本。 

当时，编辑和编译 Windows 程序要在 Windows 以外的 MS - DOS 环境下进行。为了编 
辑源代码，我采用了 WordStar 3.3, 也是我写书时所用的工具。 MS - DOS 命令行卜吋以运 
行微软的 C 编译器，然后在 Windows h 进行运行和测试。为了再次进行编辑和编译.需耍 
退出 Windows , 回到 MS - DOS 下。 

1987年有一段时间，我为了写书几乎废寝忘食，越熬越晚，甚辛:黑内颠倒。当时我家 
里还没有电视，但会收听地方广播电台 WNYC - FM 不间断播放的古典音乐和突国国家公共 
电台的节目-在那段时间里，我在 Morning Edition 结束后睡觉，刚好在 J // Things Considered 
开始前起床。 ® 


① 评注： 这足美 ISW 京公 Jt - 屯 ffM 受欢迎的两 B 新闻广播 WH . 按茇 IS 东部时 M . -般从点|.1«到9点. ),1 « 

般从16点持铱到18点. 




Windows 程序设计(第 6 版) 


根据合同约定.我 耍以磁 带和纸质形式将朽稿提交给微软出 版社。 虽然当时我们都有 
电子邮件，但那时 的电子 邮件还不支持附件。编辑好的书稿通过邮政包裹发回给我 ， kiii 
带有许多修改标记和即时贴。我记得有一贞上有人 iwir —个温度标记来倾诉我不断提交的 
书稿，上面写着“温度上升” ！ 

随苻时 m 的推移，这本书的 m 点发生了一些 变化。 事实证明，原定针对程序员和其他 
尚级用户的写书 il •划是错误的。也不知道是何原因，最终书名就定为 (( Windows 程序设汁》。 

合同截 lh 曰期 为四幻 底，但我直到八月才完成。本节最终出版于1988年，页数达到了 
850豇。如果这是符通的15稿(即没有程序淸单和图表)， 字 数将不止合同约定的10力字， 

而会达到40万字。 

《Windows 程序 设计》 第 1 版的封面上 S 着 “The Microsoft Guide to Programming for 
the MS-DOS Presentation Manager : Windows 2.0 and Windows /386" , Presentation Manager ' 
这个名称让我想起针对 Windows 和 OS /2 的 Presentation Manager 和平共存 T 两个操作系统 
环境 F 的那段时光。 

《 Windows 程序设汁》的第1版在编程社区中并没有引起太多关注 。当 MS - DOS 程序 
员意识到有必要学习全新的 Windows 时，第2版 (1990 年 ， Windows 3) 和第3版 (1992 年, 
Windows 3. 1>也相继出 版了。 

Windows API 从16位升级到32位后， 《 Windows 程序设计》的第4版 (1996 年 ， Windows 
95) 和第5版 (1998 年 ， Windows 98) 陆续出版。第5版目前还在出版发行，根据我收到的读 
者来信 分析，该书在印度和中闺最受欢迎。 

在前面5个版本中，我们用的都是 C 语言。在第3版问世后，第4版出版之前，我的 
好友 JeffProsise 说他想写 《 Windows 程序设汁与 MFC 》 ，我表示支持。我当时并不太在意 
Microsoft Foundation Classes ( MFC ), 因为我那时认为它只不过是 Windows API 的轻型包装 
程序，而且我当时也没有深入钻研 C ++。 

有些程序员希槊了解核心机制而不关心程序代码与操作系统之间的细枝末节。随着时 
间的推移， 《 Windows 程序设计》在这些程序员当中 E 得了广泛的赞抒。 

《 Windows 程序设汁》的咕期版本并非 如此。 当时，为接触到核心需要使用汇编语言 
将字符直接输出到图形! ni 示内存区域，而只能借助于 MS - DOS 来进行文件 I / O 。相对而言， 
Windows 程序员使用的是高级语言，图形完全没有加速，访 N 硬件只能通过层层 API 和设 
备驱动程序来完成。 

从 MS - DOS 到 Windows 的变迁意味着用一定的速度和效率来换取某些优势。何种优 
势？很多经验丰富程序员也说不准。是图形、图片、颜色、漂亮的字体，还是鼠标？这些 
都+是 il •算机的全部！ '叫怀 M 论#称其为 W 1 MP ( window - icon - menu - pointer . 窗口-图标 - 
菜单-指针)界面。其实，这些特点并不是人们选择这个环境并为其编写代码的动机。 

随着时间的推移，高级语 R 会变成低级语言，多层次接 口最终 会简化为本地 API (至少 
在某种语言当中)。如今，有些 C / C ++ 程序员因为效率问题抵触 C # 这样的托管语言，而 
Windows 也一再成为人们争论的焦点 。 Windows 8是 Windows 自1985年问世以来革命性 
地一次升级，但为主流桌曲系统引入针对智能电话和平板电脑设计的触換界面，这种做法 


①评注 : Presentation Manager 足 IBM 和微软在 1988 木 : 引入的种图形用户界面 (GUI). 



备受老版本 Windows 的用户质疑，有的用户甚至会为无法找到熟悉的功能发牢骚。 

伴随着 Windows 令人激动和饱受争议的新用户界面，以及现代风格的 API 和编程语 S 
的问世， 《 Windows 程序设计》也开始掀开新的篇章。 

未来计划 

在我的编程生涯中 ， Windows 8可能会占据一段 时间。 也就是说我会发表一系列 
Windows 8编程的博文。可以从该网址访问我的博客和订阅 RSS 源： 
www . charlespetzold . com 。 

我喜欢解决编程方面的疑难杂症并在博客中与大家分享。如果您有关于 Windows 8编 
程方面的疑问希望与我共同探讨并让我尝试解决，可以发送电子邮件 给我： 
cp @ chadespetzold . com 。 

从 MSDN Magazine 的2013年1月刊幵始，我每月为 DirectX Factor 栏 H 写一篇文章， 
主要 i 、 J ■论在 Windows 8和 Windows Phone 8应用程序中使用 DirectX 的相关议题 。 MSDN 
Magazine " J * 以通过这个 M 址免费阅读： http :// msdn . microsoft . com / magazine 。 

鸣谢 

微软出版社的 Ben Ryan 和 Devon Musgrave 设 汁了一 种出版方式，先将 IS 稿部分章节 
发表到开发者社区，同时也为最终版本的销钽做准备。本书也是以这种方式与大家见 |( n 的。 

Devon 和我的技术编辑 Marc Young 的部分职责是尽最多发现木书中文字和代码中的错 
误，以免我陷入尴尬 境地。 他们确实找到了不少，非常感谢！ 

感谢 Andrew Whitechapel 对 C ++ 示例代码的反馈。感谢 Brent Rector M 过电子邮件在 
对某个触摸相关问题为我提供了关键的解决方案，也感谢他为我介绍 IBuffer 的背景知识。 
感谢 Robert Levy 在触換技术方 iflj 为我提供的反馈。感谢 Prosise 在我遇到疑难问题时给 f 
我关键的支持。感谢 Larry Smith 发现我文字中的诸多错误。感谢 Admiral 鼓励我使 C ++ 开 
发者也能够从本书中受益。 

当然，书中遗留的错误是我的问题。欢迎读者通过本书前面给出的地址将发现的问题 
发送到出版商，如果是大问题，我也会在 www . charlespetzold . com / pw 6 列出。 

圾后，感谢我的妻子 Deirdre Sinnott 对我的爱与支持。感谢她在生活上做! li 必要的调 
整，只为了让我好好写这本书。 
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第 1 章标记与代码 

u Brian Kemighan ' j Dennis Ritchie 的经典 - 著作 《 C 程序设 U • 语吉》出版以来，为初学 
# 嵌示某种 **hello, world” 程序便成丫介绍编程技术前的 • 种惯例。接卜来我们也不妨创 
建一些针对 Windows 8 的 “hello, world” 程序。 

木 |5 假定读者已安装 Windows 8 及能够创建 Windows 8 应用程序的新版 Microsoft 
Visual Studio 。 

Frtn 就让我们在 Windows 8 “ 幵始 ” 界 rtn 后动 Visual Studio. 开始编程吧！ 

1.1 第一个项目 

在 Visual Studio 的首页上，默认选中的是 “ 入门 ” 选项卡。首页的左侧窗格中有个“新 
违项 U” 选项。单击它或从 “ 文件 ” 菜单中选择 “ 新建项口”。 

“ 新建项 0” 对话框打开后，在左侧窗格中选择 “ 模板 ” I 并依次选择 Visual C# | 
“Windows 应用商店 ” 。在中间区域列出的模板中，选择 “ 空内应用程序”。在对话框底 
部的 “ 名称 ” 一栏中填写项 tl 名称，这妨称其为 “Hello" 。 让 “ 解决方案名称”一栏 
与之保持一致即可。使用 “ 浏览 ” 按钮可以更改程序创建的位置。 F 面我们单击 “ 确定 ” 
按钮。 J* Visual Studio. 将会使用 ‘‘ 中 . 击 ” （ click) • 同：对 T 所要创让的 Windows 8 

应用程序，则会使用 “ 点击 ” （ tap) 间。 Visual Studio 多年前就匕对触控操作进行广优化。 

Visual Studio 会创边一个名为 Hello 的解决方案、一个名为 Hello 的项 I I 以及包含在 
Hello 项目中的各种文件。这些文件会显示在 Visual Studio 右侧的解决方案资源管理器中。 
一般 来讲，新让的 Visual Studio 的解决方案会包含一个顶 |_i , 但也吋以包含额外的应用柷 
序项 II 和类库项 Ll» 

如 K 图所水，当前项 U 的文件列表中有一个名为 MainPage.xaml 的文件，笮击该文件 
旁边的箭头 fi 会肴到子竹点是一个名力 MainPage.xaml.cs 的文件。 

•平 x | 

£i 'o ■ ^ ® @ <> ^ P 



P P Properties 

> • ■ § .e 

> ii A*s«t5 

t» _ Common 

> ,0 Appjiaml 

Hello_Temporary<ey.pfc« 
^ 0 MairPage.wiml 
丨 MainPage-*aml.cc 
p aclc3ge.app>tmanifcst 
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为杏#文件的内容，吋以双击文件名，也 " m 厶击文件名并选抒“打开”命令。 
ill — r MainPage.xaml 和 MainPage . xaml.es 文件都是 MainPage 类定义的一部分，因而在 
解决方案资源管理器中两者是关联在一起的。对丁_ Hello 这样简争的程序， MainPage 类包 
含的便是应用程庁•的全部町视元素和界而。 

MainPage . xaml . es 这个文件的名称有点特别。其扩)接名 . cs 代表 “C Sharp ” 。 以卜 '代码 
i - 掉 MainPage . xaml . cs 中的所有注释，仅保留其主体结构。 


using System; 



using System.10; 

using System.Linq; 

using Windows.Foundation; 



using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Controls.Primitives; 

using Windows.UI.Xaml.Data; 

using Windows.UI.Xaml.Input; 

using Windows.UI.Xaml.Media; 

using Windows.UI.Xaml.Navigation; 



public sealed partial class MainPage : Page 
[ 

public MainPage() 



protected override void OnNavigatedTo(NavigationEventArgs e) 


文件的幵始部分通过 using 语句列出了我们可能要用到的命名空间。对]〜这_命名空 
间， MainPage . xaml . cs 文 件…般 不会全部用到，而有时还需额外添加。 

按命名空 M 的前缀，我们4以将这些命名空间分成两大类。 

• System .* 包含针对 Windows 8应用程序的 . NET 类® 

• Windows .* 包含 Windows Runtime (或称 WinRT ) 类呢 

通过以 I . using 语句列表不难看出，带有 Windows . UI . Xaml 前缀的命名空 M 在 Windows 
Runtime 中占有電要地位。 

在 using 语句 F 面， MainPage . xaml . cs 文件定义了名为 Hello 的命名空间(与项名称相 
同) 和名为 MainPage &派生自 Page 的类。其中， Page 类是由 Windows Runtime 提供的。 

Windows 8 API 文档是按命名空间组织的，因此要找到 Page 类需知道其所归 M 的命名 
苧间。在打开的 MainPage . xaml . cs 源代码中，我们将鼠标悬停在 Page I •.曲便会发现该类诚 
T ' Windows . UI . Xaml.Controls 命名空间。 

MainPage 类的构造函数调了 InitializeComponent 方法(木章稍 / T ! •会 ft 体介绍)。该类 
还 OnNavigatedTo 力法 。 Windows 8应用程序一般具有类似网 ft 的!血导航结构， 
冈此应用程序中往往包 ff 多个派 斗:自 Page 的类。在导航方而， Page 类定义了几个虑方法， 
分別是 OnNavigatingFrom、OnNavigatedFrom 和 OnNavigatedTo 。 其中， OnNavigatedTo 适 



合用于在页 1(11 被激 活后执行某些初始化操作。在本书的前几章中，大部分示例都只有一个 
贞面。这里倾向于用 “ 页面” （ page ) —同，而不使用“窗口” （ window )。 当然，在应用程序 
底层，仍存在一个窗口，但其作用远远不及页面。 

MainPage 类定义具有一个 partial 关键字 ®。 这个关键字标明该类的定义可以存 在下不 
同的 O # 源代码文件中，而实际也如此(稍后便不难发现 h 但肓观来看， MainPage 类缺失的 
定义并非来自某个 C # 代码文件，而由 MainPage . xaml 文件提供。 

<Page 

x:Class="Hello.MainPage" 

xmlns="http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/ 2006 /xaml" 
xmlns:local="using:Hello" 

xmlns:d="http://schemas.microsoft.com/expression/blend/ 2008 " 

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/ 2006 " 

me:Ignorable="d"> 

<Grid Background*"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

</Grid> 

</Page> 

组成该文件的标记遵循一种称为 “ UJ ■扩展应用程序标记语言” (extensible Application 
Markup Language , 缩写为 XAML , 读作 “ zammel ” ）的标准。不难发现， XAML 建立在“可 
扩展标记语 iY ” (extensible Markup Language ， XML > 之上。 

般 来讲，我们在 XAML 文件中定义页面的所有可视元素，然 G 通过 C # 文件来处理 
其余的事务(如执行逻辑汁算和响应用户输 入)。 这个 C # 文件通常被称为 XAML 文件对应的 
“代码隐藏文件” ( code-behind file )。 

这个 XAML 文件的根货点是 Page 。 读者可能已经猜到它来自 T Windows Runtime ， 但 
请注意 xrClass 特性气 

<Page 

x:Class="Hello.MainPage" 

x -. Class 特性只能! li 现在 XAML 文件的根节点。上述代码我们町以这样理 解：在 Hello 
命名空间中定义一个名为 MainPage 的类，并使其派生自 Page 。 没错！这两行代码与代码 
隐藏文件的类定义表达了相同的意思。 

随后的几行代码是 XML 命名空间 声明。 事实上，这些 URI 并非指向某些 MjJi , 而只 
是公司或组织维护的唯一标识。下面两行是其中比较重要的。 

xmlns="http: "schemas.microsoft.com/winfx/2006/xaml/presentation" 

xmlns : x="http : //schemas.microsoft.com/winfx/ 2006 /xaml" 

数字2006暗示了 Windows Presentation Foundation 和 XAML 问世的年份 。 WPF 曾 
是 .NET Framework 3.0 的一部分，之前被称为 WinFX 。 这就是为什么 winfx 出现在这两个 
UR 1 中的原冈。在一定条件下， XAML 文件可以兼容于 WPF 、 Silverlight、Windows Phone 


① 译注 : U 釘这个关键宇的炎被称为 “ 分部类 ” (partial class). 有关分部类的更多信总 , 请阅读 “C# 编程指南 ” 之“分部炎 
和 " 法 ” • M 址： hup://mscln.microsoft.com/zh~cn/library/\va80x488.aspx 。 

② 译注:存的文献也将 “ attribute ” 网•翻译为性”。由子 “ property ” 也被翮译为域性，这里将前#翻译为•‘特性”以 
作区分。 W 读者注意两#形式上的 区別。 



和 Windows Runtime . 前提是 XAML 文件使用的类、属性和功能在 h 述环境中是共存的。 

代码中，第一个命名空间声明没有前缀， nrr - 引用 Windows Runtime 中的公共类、结 
构和枚举。这鸣类纸包含了 XAML 文件中出现的所有控件和其他元 蒺， 也包含本示例中出 
现的 Page 和 Grid 类。能够使用 XAML 的应用程序不止一种 • URI 中的 “ presentation ” 代 
表可视用户界 Ifti , 因而我们以根据这一段来区分应用程序的类型。例如.在 Windows 
Workflow Foundation(WF 沖使用的 XAML , 其默认命名空间 UR 1 中会 出现 “ workflow ” -词。 

第：个命名空间声明将前缀 “ X ” 与 XAML 木身固有的元素和特性关联。 Windows 
Runtime 应用程序中只涉及9个特性，其中的 x:Class 以然是最常 见的。 

第三个命名空间也值得一 提： 

xmlns;local="using:Hello" 

这个声明将 XML 前缀 “ local ” 与该应用程序的 Hello 命名空间关联。开发者在应用程 
序中0行创建的类便 " J " 以在 XAML 中用 local 前缀来引用。如 果需耍 引用核心库中的类， 
还需耍定义额外的 XML 命名空间声明来引入这些库的程序集名称和命名空间名称，详情 
参见后文。 

随后的命名空 M 卢明针对的是 Microsoft Expression Blend 。 Expression Blend uj 能会插 
入一鸣 U 用的特殊标记，而这些标记 Visual Studio 编谇器应忽略，这就是出现 Ignorable 特 
性的原因。同样， lgnorable 特性也属 T •一个命名空间， Wlfll 也需耍相应的卢明。 

Page 元素有•个名为 Grid 的子元它对应于 Windows . UI . Xaml.Controls 命名空间中 
定义的 Grid 类。该类很常用，是一种“容器” （ container ), 因为它能够容纳其他可视对象。 
巾丁- Grid 类派屮 Panel 类，因而该类也常被归为“而板” （ panel )。 在 Windows 8应用程 
序的布局方而，派生自 Panel 的类起着至关重要的作用。 Visual Studio 为我们创建的 
MainPage.xaml 文件中，通过一个预定义的标识符， Grid 被设置了 •个背景色(实际为一个 
Brush 对象) 。第2章将具体介绍这种语法。 

通常，我们按行和列对 Grid 进行分拆，从而获得中.元格(洋情参见第5 章)。 这很像是 
一种改进的 HTML 表格。没有行和列的 Grid 一般被称为“单格 Grid ” ( single-cell Grid ), 
它同样非常有用。 

我们下面使 Windows Runtime M 示一行文木。为此，要用到 TextBlock 类（也是 
Windows . UI . Xaml.Controls 命名空间中定义的}。将 TextBlock W P 中 .格 Grid 中，然后给它 
的几个特性赋值，这鸣特性实际 I :是 TextBlock 类定义的。 

项 3: Hello | 义件： MainPage.xaml^ 片段） 

<Grid Background=’’{StaticResource AppliestionPageBackgroundThemeBrush}"> 

<TextBlock Text- M Hello, Windows 8!" 

FontFamily="Times New Roman" 



注意在本书中，有的代码块会带有这样的 标题. 读者可以根据这个 
标题在本书的配套资源中找到对应的代码。虽然书中只展示完整文件 
中的一部分，但通过上下文足可表明其含义。 





这些特性的顺序和缩进都尤关紧要。力简中.起见，吋忽略其他特性，只添加 Text 。 在 
键入的过程中，会发现 Visual Studio 的“智能感知” （ IntelliSense ) 功能会提¥ 诚性的 名称和 
选的值，我们从中选取 即可。 在 TextBlock 元素添加完成后 ， Visual Studio 的设 i | •界如便 
会展尔贞如的预览效果。 

我们也 nj 以从 Visual Studio 的_1:具筘中将 TextBlock 茛接拖入，然 / Tf 在表格中设 R 其 
厲性。似木 15 并没有这抒做，而是指导读齐像 真正的 程序员那样手工输入代码和标记。 

按 F 5 键或在“调试”菜筚中选择“启动调试”，从而编译并运行此程序。即便对丁-如 
此简中•的程序，最好也通过 Visual Studio 调试器运行。如果一切顺利，你会肴到如 F 阁所 
示的界面 。 u 


Hello, Windows 8! 


TextBlock 的 HorizontalAlignment 和 VerlicalAlignment 属性设背.会使文木居中 •。程 
序员没必要自己根据显示器和文本的大小计算文木的位 H 。■以分别尝试将 
HorizontalAlignment 设背为 Left 或 Right ， 将 VerticalAlignment 设冒.力 Top 或 Bottom , 以 
体验将 TextBlock ST Grid 9个位背的效果。正如第4章所要介绍的 ， Windows Runtime 
i ； 持使用像蒺 M 确定位叫视对象，但通常我们会使用内 抨的 布局功能。 

TextBlock 还有 Width 和 Height 属性，但一般无需设对于本示例，如果设 W /小 
例中 TextBlock 的这 两个屈 件，吋能导致文7•被截断或影响文本在 ! iilfll I •.的定位 。 TextBlock 
( i 己知道 如何对两者进行设 W 。 

读养吋能会在某个能感知方向变化的设备 I •.运行此程序(如在平板电腩 k >。 果真如此， 
则会注意到，该!) i 面的内容能够自动适应屏幕方向和横宽比，而无耑程序控制。 Grid 、 
TextBlock 和 Windows 8布局系统能够动完成此项 I :作。 

为终止 Hello 程序,我们可以按快捷键 Shift + F 5, 也可以从“调试”菜单中选择 “ 停止 
调 试”。 该程序不仅被执行，还被部署到 Windows 8上，并且可以从"开始’’屏幕启动。 
我们创逑的这个项 U 的磁贴 ( tile ) 并小美观。该程序的磁贴图片存储在项1 1 的 Assets LU : 中， 


① if 注： 如! tt 出在 iflW 栈式卜 '. Visual Studio •«会| ! 1.观地报出 WHS •的位 S 及和关信总. ff . JT •可能“闪退"， 
il : 幵发 ff 小知所措。 
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可直接替换掉它们。（本书紀葚示例代码中的磁贴图片已被替换。>我们不必使用 Visual 
Studio 调试器，从 Windows 8‘‘开始”屏幕 uj ■茛接运行该程序。 

此外，程序也可以在模拟器中调试和运行。我们可以控制模拟器的分辨率、屏辎方向 
和其他特性。在 Visual Studio 工具栏中.有一个显示为“本地 il •算机”的下拉列表，将其 
改为“模拟器”即可。 


1.2 图片的使用 


传统的 ** Hello , World " 程序是以文本形式显示的，但也不一定拘泥 T •此。氺例项目 
Hellolmage M 过以 K 代码从作者的网站上获取一个图片。 


项 ri: 


文件： MainPage. 



( 片 段） 

ApplicationPageBackgroundTheroeBrush J' 
.charlespetzold.com/pw6/PetzoldJersey.jpg" 


Windows . UI . Xaml.Controls 命名空间下定义的 Image 冗索是 Windows Runtime 程序 
位图的标准方式。在默认情况下，图片会被缩放以适应可用空间，但会保持图片的原始 LC 
宽比(如 卜图所 示)。 



如果豇曲的大小发牛变化，比如改变屏幕方向或切换到辅屏视图 (snap view ), 图片的 
大小也将随之改变。 

我们吋以通过 Image 类定义的 Stretch 属性来修改这个默认的敁示行为。该属性的默认 
值为枚举成员 Stretch . Uniform 。 F 面我们尝试将其设 S 为 Fill 。 

<Grid Baclcground="(StaticResource ApplicationPageBackgcoundThemeBrushl "> 

<Image Source="http://www.charlespetzold.com/pw6/PetzoldJersey.jpg" 


这样，图片的原长宽比被忽略，从而填充牿个容器，如卜图所 






S 图片，如下图所示。 


Stretch 属性设置为 None , 则会按原像素值 (320 X 400) 显 /j 


'-j TextBlock 一样，我们也以通过 HorizontalAlignment 和 VerticalAlignmeni 属性控 

制图片在豇面上的位 S 。 

UniformToFill 是 Stretch 厲性的第四个选项，可使图片在保持 K 宽比+变的前提卜充满 
整个容器。但为了做到这一点，只有一个办法，即对图片进行裁剪。罕丁哪-部分被哉掉， 
则取 决丁— HorizontalAlignment 和 VerticalAlignment 属性的设 S 。 

通过 Internet 获取图片依赖』_刺络连接，并目.耗时。为确保图片能够立即! uU ), ⑷将 
片 1 V 应用程序本身 捆绑。 

Klfli 我们通过 Windows 的画图程序创建一个简中-位图。运行 iffli 图程序，中.击“文 
件”丨“属性”，设置图片的大小(如宽480,高320)。通过鼠标、手指和笔，我们可以画出 
&己的问候语。 

除了 BMP 、 JPEG 、 PNG 和 GIF 这儿种常见格式外 ， Windows Runtime 还 ic ； 持其他几 
种。对于 I '. lft 这张 图片，我们不妨将其保存为常见的 PNG 格代，将其命名为 Greeti n g . pn g 。 
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Klfli 创建一个新项1:1,命名为 HelloLocallmage 。 人们往往愿, S 将项 IJ 用到的图片存储 
到名为 Images 的0 录!^ 在解决方案资源管理器中，石击项14名称，选杵“添加”丨“新建 
文件夹” ^如果项 111 节点在解决方案资源管理器中匕被选中，也吋以在“项丨丨”菜—中.中选 
择 “新建文件夾”。将该文件夾命名为 Images 。 

右击 Images 文件夹，选择“添加” | “现有项”。找到刚才保存的 Greeting.png 文件, 
然 d . 击“添加”按钮。迮 Greeting.png 文件添加到项 H 中之后，我们 S ; 要确保其作为应 
用程序的内容存在。在该文件上石击，选抒“属性 "。在 “属性”窗格中，确认“生成操 
作”的值为“内容》 

引用该图片的 XAML 标记 W 之前从 M I •.获取图片所使用的标记类似。 

项 H: HelloLocal Image I 文件： MainPage.xaml (片 段} 

<Grid Background="iStaticResource ApplicationPageBackgroundThemeBrush}"> 



注 . S , Source 厲性值包含文件火和文件的名称。 M 终效果如下图所水。 




有的程序员也会将存储应用程序位阁的文件夹命名为 Assets 。 您或许己经发现，标准 
的项 IJ 模板 Li 将程序的图标放在 Assets 文件夹中。我们同样可以直接利用该文件夹 ， ±m 
另行创建。 

1.3 文字的变形 

Grid 、 TextBlock 和 Image 有时会被看作“控件”。这或许因为人们知道其来自于 
Windows . UI . Xaml . Controls 命名空间。但从严 格意义 上讲，它们并非控件。虽然 Windows 
Runtime 定义了一个名为 Control 的类，但这3个类没有派生自它。下面展示了我们目前遇 
到的类的层次结构。 

Object 

DependencyObject 
UIElement 

FrameworkElement 

TextBlock 


Page 派生自 Control 类，但 TextBlock 和 Image 并没有，而是派生自 UIElement 的子类 
FrameworkElement 。 iF . W 如此，4辟通 XML 文件中的内容一样，我们也将 TextBlock 和 Image 
称为“元索” ( element)o 

元索 1 j 控件的区别并不明显，但仍有必要弄淸楚。从直观上看，控件由元素构成，其 
外观 || J ■通过模板进行定制。 Grid 也是一种元索.但我们一般称其为“而板” （ panel ), 我们 
接 F 来会看到其独特之处。 

卜面做这样一个试验，在 Hello 项 tJ 中，将 Foreground 和所有与字体有关的特性从 
TextBlock 元索移令: Page 允袭。此时的 MainPage . xaml 文件如 K 所示。 


xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x= M http://schemas.microsoft.com/winfx/ 2006 /xaml" 
xmlns:local="using:Hello" 


d: "schemas .c 


: :Ignorable='* 


-compatibility/2006" 


FontSize=" 96 M 
FontStyle="ItaUc M 
Foreground= n Yellow"> 

<Grid Background={StaticResource ApplicationPageBackgroundThemeBrush J" 


HorizontalAlignment= 

VerticalAlignment="C 


</Page> 


我们会发现示效果并未发生改变。这也就是说，针对 Page 元素设 S 的特性会作用丁- 
页面上的所有元素。 



F 面我们将 TextBlock 的 Foreground 属性设冓•为 Red ， 看肴会发生•什么。 

<TextBlock Text="Hello f Windows 8!" 

Foreground="Red" 

HorizontalAlignmenc="Center M 
VerticalAlignment*"Center" /> 

Page 的黄色设置被局部改写成了红色。 

1：面定义的 Page 、 Grid 和 TextBlock 被称为元素的“町视树”。只+过在 XAML 文件 
中，这棵树是上下颠倒的，即最上曲的 Page 是树的主干，其卜面的子孙 ( Grid 和 TextBlock ) 
构成分支。这让人联想到 Page 定义的字体和 Foreground 属性值会沿着⑷视树的脉络从父元 
素传播到子元素。这样看没错，只不过有-点需要注意，即 Grid 并未定义这些属性。此外， 
在 TextBlock 和 Control 中这些属性的定义也是相互独立的。也就是说，尽管沿途的元素具 
有不同“基因”，但属性值从 Page 到 TextBlock 的传播仍能得以完成。 

如果在文档中查看 Page 或 TextBlock 类的属性，则会发现同一属性具有两个名称小同 
的定义。例如， TextBlock 具有-个类型为 double 的 FontSize 属性。 

public double FontSize { set; get; } 

TextBlack 还冇一个类型为 DependencyProperly 的 FontSizeProperty 属性。 

public static DependencyProperty FontSizeProperty { get; \ 

if ? 注意 ， FontSizeProperty M 性是一个只读的静态 厲性。 

用丁•构建 Windows 8应用程序用户界面的类，有很多都同时具有常规属忭和类型为 
DependencyProperty 的“依赖属性” (dependency property )。 值得一提的是，在 L : 文介绍的 
类层次结构中，有一个名为 DependencyObject 的类。这两个类型具有一定 联系： 派生自 
DependencyObject 的类通常会声明 DependencyProperty 类切的只读静态属性。 
DependencyObject 和 DependencyProperty 都定义在 Windows . UI.Xaml 命名空间 _ F , 这表明 
两者对整个 U 1 系统起着基础性作用。 

依赖属性旨在解决一些~复杂用户界血有关的基础性 H 题。在 Windows 8应用程序中， 
我们能够以多种方式设置属性。例如，正如前文所介绍的，对象的属性可以直接设芮，也 
可以从可视树继承。正如下一章所要介绍的，属性设 ' W 吋能还来自于样式定义。我们还会 
到通过动画设 K 属性，后的几章会评细介绍这方面内容。 DependencyObject 和 
DependencyProperty 类能够 为+同 属性设賈方式设定优先级，从而协调属性在系统中的设 
S 顺序。这瓜轿+深入讲解该机制，相信读 荇会在 &己定义控件的时候有切身体会。 

FontSize 属性背后也伴随着一个名为 FontSizeProperty 的依赖属性。为了简便起见，人 
们有时会用 FontSize 来指代依赖属性，这并不会产牛误解。 

UIEIement 及其子类定义的许多属性都是依赖属性，但其中只有一部分会沿吋视树传 
播。 h 文介绍的 Foreground 和与字体有关的属性是坷传播的。另外还有一些，本书会在遇 
到时 P 以提示。依赖属性具有默认值。对丁 •氺 例项 Hello , 如果删棹 TextBlock 和 Page 
中除 Text 以外的特性，程序会在页曲的人: I :角显示一行11像素大小的、采用系统7体的 
文木。 

FontSize 屈性以像素为中-位，用 T •设置字体的设汁高度。设 II •高度包含卜'伸部分 
( descender ) 和变 A ••符弓 '(diacritical mark ) 所占 A ' 度。我们-般以赌 ( point ) 力中.位指:•体大 
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小。一磅等于1/72英寸。在实际的设备 I :,为在像素和磅之间进行换算，我们耑耍知道显 
示器的分辨率，即每英寸点数 ( dots - per - inch , DPI )。 在默 认条件卜 _ ，系统假定 W 水器的分辨 
率为96 DPI 。 字体大小96像素等于72磅 (1 英寸),那么默认的11像素就是8%睹。 

对于卨分辨率的显示器， Windows 会&动 调輅！元素的大小与平标。应用程序⑴以 
通过 DisplayProperties 类获得有关信息，该类几 T - 是 Windows . Graphics . Display 命名空间 S 
® 要的类喂了。在大多数情况 K , 将显示器和打印机分辨率假定为96 DR 是没有问题的◊械 
于这个假设，我们便可以推算出英寸与像素的常用 换算: 48(1/2" >， 24(1/4"). 12(1/8 M ) 
和 6(1/16" )。 

如果移除 Foreground 特性，那么系统会以!: R 底內卞砬氺文本。背眾实际并未被设 H 为 
黑色，而是由 Grid I 用的预定义的 ApplicationPageBackgroundThemeBrush 标 i 只符所决定的。 

〆 例项 U Hello 还包含一对文件： App . xaml 和 App . xaml . cs 。 两者共 RI 定义了名为 App 
的派生自 Application 的类。 S •然毎个应用程序⑷以有多个 Page 类的派4:类，但只能有 
个 Application 的子类。 App 类负贵提供设置并管理能够影响整个应用程序的活动。 

Ktfif 做一个实验： / j : App . xaml 文件的根元挺中，将 RequestedTlieme 特件设胃为 Light 。 

〈Application 

x:Class-"Hello.App" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/ 2006 /xaml" 
xmlns:local="using:Hello" 

RequestedTheme="Light"> 



该特性只有 Light 和 Dark 两项 设置。 此时 我们贯 新编译并运行该程庁•便会发现背 眾己 
经变为浅色。这说明 ApplicationPageBackgroundThemeBrush 标识符引川的颜色纪 k f 变化。 
如果 Page 或 TextBlock 的 Foreground 未被具休设腎，那么文字将为黑色。这 tli 就是说， 
Foreground 属性在不同主题 K 具有不同的默认值。 

书中的大部分水例都默认采用浅色 ( Light ) 1:题，因为这样印刷效朵吏好，托费的堪水 
也更少。但是要注意，许多小型设备和与 tl 俱增的较大的设备，都 ft ： 谷 OLED (有机发光 . 
极管)技术的 U 示屏。冈而降低其焭度，可以减少电能的消耗。降低电能消粍是深色中题 
( Dark ) 被广泛采用的原 W 之一。 

当然 ， Grid 的 Background 属性和 TextBlock 的 Foreground 属性充全 Kl ' 以 行设 1 ft !。 



Visual Studio 的“智能感知”功能吋以为这类厲性提供140个标准颜色名称及 
Transparent (透 明) 选项。这些选项都是 Colors 类的静态 M 性。除/指定名称外，我们还能够 
以片-号打头，通过 I •六进制的“红绿蓝” （ RGB ) 值来设 W 颜色，毎种色值的范_ 从⑻到 FF 。 

Foreground"" » FF 8 000 " 

这个颜色具有饱和的红色，半成绿色，没有蓝色。色值的最前血还吋以冇-个代表 u 
通道的可选字节®，用于指定不透明度,其取值范围也从00到 FF 。 -卜•面是-个半透明红色 


①评注,«两个十八进制•符代及-个字节. 


的例子。 

Foreground:" # 80FF0000" 

指定 a 值的颜色有时被称为 ARGB 颜色。 UlElement 类还定义了一个 Opacity M 性， 
取值范围介亍 0( 完全透明)到 1( 完全不透明)之间。在 Hellolmage 项 LI 中，读荇"了以尝试将 
Grid 的 Background 属性设置为除黑色以外的某种颜色(如 Blue ), 然将 Image 元素的 
Opacity 屈性设 W 为0.5。 

字节形式指定的色值与 sRGB (标准 RGB ) 颜色空间-一 对应。 该颜 色空闽 的历史吋追 
溯 到削极 射线符 ( CRT > M 水器时代 。 CRT M 水器根据颜色字节控制点焭各像素的电汛。非 
常巧合的是，当时! nU ; •器像尜亮度的非线性和人类肉眼对亮度感知的非线性矜加 f •在定 
程度上相让抵消，使得这些字节式色值近似表现为线性，或荇说准线性。 

此外，还有-种名为 scRGB 的颜色空间，通过每种颜色的光线强度表尔，毎段的取值 
范 II 从0到丨。下曲是中度灰的例子。 

Foreground= M sc# 0.5 0.5 0.5" 

由于•人类肉眼对光强的反应呈对数关系，因而这个灰看起来偏亮，称不上是中度的。 

如果需耍! oU ; •无法通过键盘直接输入的字符，吋以使用标准的 XML 转义字符来指定 
Unicode 值=例如，如果只有一个美式键盘,但耍！ ni 示 “This costs €55”， uj •以这样以 Unicode 
形式指定其中的欧元 符号： 

<TexCBlock Text="This costs &#8364;55" ... 

或者使用十六 进制： 

<TextBlock Text="This costs &#x20AC;55"... 

除了转义字符.还吋以将文本直接粘贴到 Visual Studio 编辑器中(正如木京 后血 的小例 
所展示的)。 

■ V 标准 XML 相同，字符串中 uj ■以包含以“&” （ and ) 符号为前缀的转义字符来表 氺特殊 
字符。 

• & amp ; 表示 & 

• & apos ; 表示单引号 

• & quot ; 表#双引号 

• & lt ; 表示左尖柄号 (less than ， 小: T 号） 

• & gt ; 表4右尖括号 ( greaterthan , 大于 号） 

除茛接设黃 TextBlock 的 Text 属性外，还叶以将 TextBlock 标记拆分为开始和结束标 
记，并将文本以内容形式置于其中。 



正如第2章将介绍的，将文木以内容形忒 W J - TextBlock 内部 并小完令等同 r 设芮 Text 
属性。事实上,以内容形式设 S 文本要更为 强大。 即便不调用特殊功能,这样仍 叫 以添加 
大最 文木，而且不必拘心额外的空白和对引号的处理。示例项 U WrappedText 演承 了如何 
通过 TextBlock 的内容来! ni 不幣段文木。 





tesLiu 丄 enouyn lux une eyes, dnu even mote, pernaps/ tot my mina, to 
which it appeared incomprehensible, without a cause, a matter dark 
indeed. 



在解析时，每行尾端的换行符和首部的 8 个交格会被融合成笮个空格字符。 
i 占注意 Text Wrapping 厲该厲性的默认值为枚举成员 TextWrapping . NoWrap (仅有 的 
另个成员是 Wrap )。 TextAIignment 属性设置为 TextAlignment 枚举的某个成员: Left 、 
Right 、 Center 或 Justify 。 其中， Justify 能够在词间插入额外的空囪，使每行文本都能够在 
发石 两端对齐。 

卜图 所水程序能够以横屏或竖屏显示。 



• -I-—-- - — 

awake; it did not disturb my mind, but it lay like scales upon my 
■eyes and prevented them from registering the fact that the 


如果读 fi •的 it 算机能够响应屏铬方向的变化，则会看到文本格 A 能够被动调幣。 
Windows Runtime 会也空格或连7-符处断行，但+会在+ 撕空格 (&# x 00 A 0 域+间断连 
符 (&# x 20 ll ) 处断行，而 H . 所有软连字符 (&# xOOAD > 都会被忽略。 

并非所有 XAML 元素都像 TextBlock 一样支持文本内容。例如， Page 和 Grid 就+支 
持。 XAML 的形式并斗;像 HTML 那样自由，闵为 XAML 的语法完全祛 丁底 层的炎 :和厲 性。 

但 Grid 支持多个子 TextBlock 。 4例项 0 OverlappedStackedText / l ： Grid 中添加了两个 
颜色和字体大小各+同的两个 TextBlock 儿索。 























Windows 程序设计 ( 第 6 

项 FI: OverlappedStackedText I 义件： MainPage.xaml (/V©) 
<Grid BacJcground« M Yellow"> 

<TextBlock Text="8" 

FontSize= H 864" 

FontWeight="Bold" 

Foreground="Red" 

Horizonta1A1ignment="Center" 
VerticalAlignment= w Center" /> 
<TextBlock Text="Windows" 

FontSize="192" 



Foreground= n Blue" 
HorizontalAlignment«"Center" 
VerticalAlignment="Cenc.er" /> 


卜阁所 水为该程序的运行效果。 



i # 注怠，第：个儿素反而! oU : •在第一个 九系之 匕 p T •在三维平标空间中， Z 轴指向 
外侧， W 而这种视觉的分层机制被称为 “ Z 顺序 ” （Z or ' der )。 第4章会介绍如何修改这一 
行为。 

气然，使元#歌叠并非处理多块文木的一般方法。第5章会介绍如何在 Grid 中定义行 
和列， l / lil'Tl Grid 中.元格中仍 Kf 以通过 HorizontalAlignment 和 VerticalAlignment 组织多 
个元素以防止元素電叠。示例项目 IntemationalHelloWorld 在9个位置显示了不语言的 
“ hello , world ” （來自“谷歌翻 if ” ）。 

顼月 ： IntemationalHelloWorld I 文件： MainPage.xaml ( 片段 > 

〈Page • 

x:Class=' , InternationalHelloWorld.MainPage" 



<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<!-- Chinese (simplified)--> 

<TextBlock Text= " 你奵， III: 界 " 



<TextBlock Text="6>J_j l^Jj." 

HorizontalAlignment="Center" 
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<! -一 Japanese -- > 

<TextBlock Text:" 二 人匕 6 、 IR 界中❼ * 么 $ 厶 

HorizontalAlignment="Right" 
VexrticaIAlignment="Top" /> 

<!— Hebrew -- > 

<TextBlock Text*"oi'?oJ / d*?i u M 

HorizontalAlignment="Left" 
VerticalAlignment="Center" /> 


<! —— Esperanto --> 

CTextBlock Text="Saluton, mondo" 

HorizontalAlignment="Center" 
VerticalAlignment="Centei" /> 


A LjcJI " 
HorizontalAlignment="Right" 
VerticalAlignment="Center" /> 


:! -- Korean --> 


〈TextBlock Text="O^^Ailfl, ^ 人制 | 


VerticalAlignment^" 


/> 


<TextBlock 


Text=" 3^pa HCTnyft, m m p 
HorizontalAlignments"Center" 


VerticalAlignment="Bottom" /> 


<!-- Hindi --> 

<TextBlock Text-"*i#i<^ %, " 

HorizontalAlignment="Right" 

VerticalAlignment»"Bottom" /> 

</Grid> 

</Page> 

需耍注 M 的是，在根儿素设祝的 FontSize 属性作用丁-所有9个 TextBlock 允袭(如 K 图 
所示)。属性继承机制是降低 XAML 内容®复的一种有效手段。除此以外，卜'一章会介绍 
另外儿种方法。 


你好，电界 


乙 UI5(J、 世界中①办 

,Dibw 

Saluton, mondo 

joJlsUI ,[jS>jjO 


3ApaBCTByM, Mup 

^Pl^l t, 





1.4 播放媒体文件 


截辛 LI 前，本章己经展示了文木和位图形式的 “ hello , world ” 。示例项目 HelloAudio 
展冶了如何播放来自 M 站的音频 f » j 候。其中的音频是使用 Windows 8中的录音机程序录制 
的，它能够将音频保存为 WMA 格式。该氺例的 XAML 文件 如卜所 /jh 

JUiFl ： HelloAudio I 文件： MainPage.xaml ( 片 段 } 

<Grid Background=*' (StaticResource ApplicationPageBackgroundThemeBrush}"> 

<MediaElement Source="http://www.charlespetzold.com/pw6/AudioGreeting.wma" /> 

</Grid> 

MediaElement 类派生 FrameworkElement 。 里然没有用 F 控制音频的用户界 iffi ，（ kl 该 
元素为自行开发提供了必要的支持。 

我们还吋以使用 MediaElement 来播放视频。•例项0 Hello Video 展示了如何播放来 f -1 
M 站的视频。 

项 FI: HelloVideo | 义件： MainPage.xaml( 片段） 

<Grid Background:"(StaticResource ApplicationPageBackgroundThemeBrush) w > 

<MediaElement Source="http://www.charlespetzold.com/pw6/VideoGreeting.winv" /> 


1.5 代码形式的变通 


对元索或控件进行初始化. XAML 并非 唯一的 选择。我们可以利 用纯粹 的代码完成。 
从所实现的 功能卜 .讲， XAML 所能做的，代码都能做到。代码适合用来创逑同种类切的多 
个对象，因为 XAML 中没有类似 for 循环的机制。 

K 面我们创建一个名为 HelloCode 的项口，并在 MainPage.xaml 文件中为 Grid 分 ft ! — 
个名称。 

项 R: HelloCode | 文件： MainPage.xaml ( 片段） 

<Grid Name="contentGrid" 

Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 


为 Grid 设置 Name 属性可以使我们在代码隐藏文件中访问该元索。我们也呵以使用 
x : Name 0 


d x : Name="contentGrid" 
Background*"!StaticRes 


ApplicationPageBackgroundThemeBrush)"> 


</Grid> 


在大多数情况下 ， Name 弓 x : Name 之间并无实际区别。 “ x ” 前缀说明 x : N ame 特忭是 
XAML 同有的，可以使用它来标识 XAML 文件中的任何对象。而 Name 特性更为 严格： 
Name 是 FrameworkElement 类定义的. 因而我们只能在 FrameworkElement 的子类 I •.使川。 
对 J _ •没有派生自 FrameworkElement 的类，则只能使用 x : Name 0 一些程序员为了一致性全 
部采用 xiName 。 作#倾向; T •如果 " J •能就用 Name , 其次才用 x : Nam e 。 （然而，对应用程 


序的程序集中记义的自定义控件，有时必须用 x : Name。 > 

小论选抒 Name 还是 x:Name, 元素的命名规则仍要遵循变贵的命名规则。例如 • 名称 
中小能包含空格，也+能以数字 幵头。 所有名称在同 一 个 XAML 文件中必须唯 一 。 

我们志要/1: MainPage.xaml.cs 文件中额外添加两个 using 语句。 

项 H: HelloCode | 义件： MainPage.xaral .cs ( 片段 > 



第 - 个是力 J" 使用 Colors 炎，另一个是为了引入 FontStyle 枚平。这两个 using 语句不 
必下动添加。如果使用 Colors 类或 FontStyle 枚举， Visual Studio 将会在无法解析的标识符 
Fltf 划I•.红色波浪线。我们可以在 h 面右击，然; T； •从快捷菜中.中选抒“解析”。 ‘必 要的 
using 语句会 ft 动按字符序插入到其他 using 语句中(前提是现有 using 语切是有序的)。 

通过右键菜中.中的“组织 using” | “移除未使用的 using” 讨以沾理该列表 。（氺 例中的 
MainPage.xaml.cs l_L 经被执行过该操 作。） 

MainPage 类的构造函数非常适合用宋创迚 TextBIock. : /j 其设 W 属性，并将其添加到 
Grid 中。 

项 R: HelloCode I 文件 : MalnPage.xaml.es ( 片段 } 

public MainPage <) 


TextBIock txtblk = new TextBIock(); 
txtblk.Text = "Hello, Windows 8!"; 

txtblk.FontFamily = new FontFamily("Times New Roman"); 

txtblk.FontSize = 96; 

txtblk.FontStyle = FontStyle.Italic; 

txtblk.Foreground ^ new SolidColorBrush(Colors.Yellow); 
txtblk.HorizontaiAlignment = Horizonta1A1ignment.Center; 
txtblk.VerticalAlignment = VerticaiAIignment.Center? 

contentGrid.Children•Add(txtblk); 

) 

沾读者 注总，这段代码的最 /Ti •一行引用了 XAML 文件中名为 comentGrid 的 Grid, 就 
像引 用一个符通 对象一 样。 （ U 实 I., 这 ffi 引用的确实是一个锌通的对象，而且所使用的变 
诅还是以字段的形式存在的。 )Grid 有一个派生 Panel 的 Children 属性，类喂为 
UlElementCollectiono 该类印 是实现 IList<UIElement>I IEnumerable<lJIEIement> 接 U 的集 
合。 iF.W 如此 . Grid 才能够包含多个子元素，这一点在 XAML 中并未反映出来。 

相比在 XAML 中进行定义，代码形式的稍砧冗妖。这是因为 XAML 解析器在辂 iTJ 创 
建广额外的对象并执行了转换 ^ 从这段 代码吋 以了解到，我们需耍为 FontFamily M 性创建 
FonlFamily 对象 ， Foreground 是 Brush 类％ S '® 创建 Brush 子类(如 SolidColorBrush ) 的实 
例。为设 S 颜色，可以使用 Colors, 它包含 141 个类喂为 Color 的静态 _ 件。也叫以通过 
Color.FromArgb | 挣态方法根据 ARGB 字 W 來创建 Color 值。 

FontStyle > HorizontaiAlignment 和 VerticalAIignment _性都是枚平类 井 FU4 性 1 -j 

© ifiti 这个示例 U 些特殊。由 i Control 突恰 1M 个名为 FontStyle 的«性成 M, 而 Page E Control * 的 闪而 Visual Studio 
iS 优光认为 FomSiyle^Wrt 名称 , 而不足枚平 * «, 也不会 在右 ® 萊中 . 中提示 “W 析 ” 选项 • 为 iK 确 W 析该炎祖 , F 
动添加 Windows.UI.Tcxl 命 




类纲同名。 Text 和 FontSize 都是基本数据类甩，分别为字符串和双精度浮点数。 
我们 nj ■以通过 C #3.0 中的属性初始化方式来简化以 I •-代码。 

TextBlock txtblk = new TextBlock 



FontStyle = FontStyle.Italic, 

Foreground = new SolidColorBrush(Colors.Yellow), 

HorizontalAlignment = HorizontalAlignment.Center, 

VerticalAlignment - VerticalAlignment.Center 

)； 

木 书 广泛地使用了这种风格的代码。（为了不在演示过程中造成不必耍的困惑，本书并 
没有使用包括隐式类玴在内的其他 C # 3.0 功能。)不论选择哪种方式，编译并运行 HelloCode 
项 LI 都应获得~ XAML 版本相同的结果。两#看起来相同是 W 为在幕 P 也是相冋的。 

除上述代码提供的方法外，也可以在重写的 OnNavigatedTo 方法中创建 TextBlock 并 
将其添加到 Grid 的 Children 集合中。还可以在构造函数中创建 TextBlock , 将其保存在宁 
段中，然沿在 OnNavigatedTo 中将其添加到 Grid 。 

墙注意，示例将代码放在了 MainPage 构造函数的 InitializeComponent 方法调用之 jTi 。 
我们 u ] ■以 / i : InitializeComponent 力■法调用之前创述 TextBlock . 但必须在该方法调用之 iTi •将 
TextBlock 对象添加到 Grid , 因为此前 Grid 并不存在。 InitializeComponent 方法会在运行时 
解析 XAML . 初始化所冇 XAML 对象并将它们添加到•棵 uj ' 视树 h。InitializeComponent 
W . 然是一个非常電要的方法，但让人困惑的是，为何在文档中找+到它。 

事情是这 样的 ： Visual Studio 编汴应用程序时会牛成一些中间文件。使用 Windows 的 
文件资源管理器导航到示例 HelloCode 的录，我们来找找这些中间文件。在 obj 目录的子 
目录中，我们会发现 MainPage . g . cs 和 MainPage . g . i . cs 。 文件名中的 “ g ” 表示该文件是被 
“生成的” （ generated )。 这两个文件都定义了 MainPage 类，部带有 partial 关键7-并派 'k G 
Page 类。开发者可控的 MainPage . xaml . cs 文件和这两个自动生成的文件构成了 ig 终的 
MainPage 类的定义。虽然我们不沿要编辑这两个生成的文件，但仍需要对其有一定了解， 
因为如果在调用 XAML 文件的过程中出现运行时错误，这些自动斗:成的代码仍会出现在 
Visual Studio 中。 

MainPage . g . i . cs 文件有两点值得注意。首先，我们 uj ■以在该文件中找到 
InitializeComponent 方法的定义，该方法会调用静态方法 Application . LoadComponent 来加 
栽 MainPage . xaml 文件。 其次是这个分部类包含一个名为 contentGrid 的私有字段，它 IH 是 
我们在 XAML 中为 Grid 分配的名称。 InitializeComponent 方法将该7-段赋 J "» 了 
Application.LoadComponent 创纽的具体的 Grid 对象。 

contentGrid 字段在整个 MainPage 类中部 " T 以被访似在 InitializeComponent 被调用 
前，该字段为 null 。 

总的来看， XAML 文件的解析可分为两个阶段。第一阶段发生在编译时，编译器会解 
析 XAML , 从中抽取所有允索的名称(还有一些其他仟 务)， 然后在 obj I I 录下牛.成中间 C # 
文件。 这些生 成的 C # 文件会其他受我们控制的 C # 文件一同编译。第：阶段发牛.在运行 
时， XAML 文件会再次被解析，初始化所有元索，将这些元袭对象组合成 up 视树.从而获 



得这些对象的引用。 

读者吋能 ffi 知道作为 C # 程序入口点的标准 Main 方法在哪 fR ? 在 App . g . i . cs 中 。 Visual 
Studio lli 会根据 App . xaml 生成两个文件， App . g . i . cs 是其中 之一。 

作为稍后介绍依赖厲性的铺垫，卜 tfU 我们需要了解一些内幕。 

正如前文所介绍的，我们用过的许多属性(如 FomFamily 和 FontSize ) 都有对应的静态依 
赖属性(如 FontFamilyProperty 和 FontSizeProperty )。 如果将以 F 普通的属性赋值 

txtblk.FontStyle = FontStyle.Italic; 


改成 


txtblk.SetValue(TextBlock.FontStyleProperty, FontStyle.Italic); 

似乎让人有些困惑。 

后者调用了 DependencyObject 定义的 SetValue 方法 ( TextBlock 会继承它>。 M 然调用 
的是 TextBlock 的方法，但传入的却是 TextBlock 定义的 Dependency Property 类甩的 
TextBlock 和我们所要设1!的值。虽然上述两种设 S FontStyle 属性的方法形式不同，但却 
无实际区别。在 TextBlock 类的源代码中， FontStyle 属性的实现 1 j 以 卜代 码非常类似。 

public FontStyle FontStyle 
( 

set 

SetValue(TextBlock.FontStyleProperty, value ); 



之所以说“类似”，是因为本人没有 Windows Runtime 的源代码，并且源代码 uj •能是 
HJ C ++ 写的，而小是用 C #。 但如果 FontStyle 属件的定义 1 j 其他内逑的依赖属性…致，那 
么 set get 访问器过是使用 TextBlock.FontStyleProperty 来调用 SetValue 和 GetValue 。 
这 1 &给 Mi 的是接近标准的代码。我们自己定义依赖属性时，可以采用 卜曲这 种省略部分空 
fl 的方式。 


public FontStyle FontStyle 



前文的4例演水了如何 通过 XAML 在 Page 标签上统一设 W Foreground 及4字体相关 
的属性，而不中.独设 S TextBlock 的属性。通过这个示例我们认识到， TextBlock 能够继承 
这些城性。当然，在代码中我们 也吋以 做到。 


public MainPage () 




txtblk.Text h "Hello, Windows 8!"; 

txcblk.HorizontalAligriment = Horizonta1A1ignment.Center; 
txtblk.VerticalAlignment = VerticalAlignraent.Center; 


contentGrid.Children.Add(txtblk); 

) 

为访问 Page 炎的属性和方法， C# 并 + 强制要求使 W this 甜缀 。 Visual Studio 
编辑器中 , 键入 this 前缀可以调用 “ 智能感知 ” 功能 , 提示 可选的 方法、属性和事件等。 

1.6 通过代码显示图片 

木章前 |fl [ 的 • 例项丨丨 Hellolmage 和 HelloLocallmage 戚示 T 如何 M 过 Image 兄疾来 W. 
示图片。在 XAML 中，我们将 Source 厲性设 E 为指向阁片的 UR1 。 中 . 从 XAML 文件右 
可能会让人认为 Source 属性是字符串类型或 Uri 类型 , 而实际 I•. 要复 杂些 : Source 厲性的 
类型实际为 ImageSource 。该类甩的对象封装了 Image 元索所要实际敁小的图片。 
ImageSource 并未定义什么公共成员，该类甩木身也不能实例化，似冇几个派卞 j •该类的屯 
要类喂值得注总。下面是一个相关的类层次结构。 

Object 

DependencyObject 
ImageSource 
BitmapSource 
Bitmaplmage 
WriteableBitmap 


Windows.Ul.Xaml.Media.Imaging 命名空间卜。 BitmapSource 也不能被实例化。它定义了 • 
对属性 PixelWidth III PixelHeight, 以及一个名为 SetSource 的方法，该方法吋以从文件或 M 
络流淡取位图数則。 Bitmaplmage 继承 /■ 这 A 成员，还定义 / UriSource W 性。 

我们可以在代码中使用 Bitmaplmage 炎:来•图片。除了定义 / UriSource 属性外，该 
类还定义了一个接受 Uri 对象的构造函数。在示例项 H HellolmageCode 中， Grid 被命名为 
contentGrid. 并在代码隐藏文件中通过 using 关键字引入 / Windows.UI.Xaml.Media.Imaging 
命名空间。卜 1(11 的代码肢小了 MainPage 的构造函数。 

项 HellolmageCode | 义件： MainPage• xaml.cs <)| 段 > 
public MainPage() 


chis.InitializeComponent(); 

Uri uri = new Uri<"http://www.charlespetzoi 
Bitmaplmage bitmap = new Bitmaplmage(uri); 
Image image = new Image(); 
image.Source = bitmap; 
contentGrid.Children.Add(image); 


i.com/pw6/PetzoldJersey.jpg" 


力从代码中访 H Grid, 并 +— 定要对其进行命名。 Grid 会被设贤到 Page 的 Content M 
性 I., R 此以 K 这行 代码： 


rid.Children.Add(image); 


可以替换为卜 ' 曲 两行 : 



grid.Children.Add(image ); 

对 r 这么一个简中.的程序， Grid 并非必需。我们吋以将 Grid 从" I 视树 I :移除，并将 
Image 寅接设 S 到 MainPage 的 Content 属性卜.： 

this.Content = image; 

MainPage 类的 Content 属性来 I '] UserControl 炎， .类 咐为 U 1 Element , 因而 MainPage 
类只女持一个子元素。 -般 来讲， MainPage 的子元素是支持多个子元桌的 Panel (面板)，似 
如果只需要一个子元索，则可以良接使用 MainPage 的 Content 属性。 

我们可以混合使用 XAML 和代码，即在 XAML 中初始化 Image 元素，而在代码中创 
ili Bitmaplmage ； 也 nf 以在 XAML 中初始化 Image 和 Bitmaplmage . 而在代码中设黃 
Bitmaplmage 的 UriSource M 性。•例项 丨丨 HelloLocallmageCode 采用 /第一种方法，能够 
砧尔 Images LI 4 卜 '的 Greeting . png 文件。 XAML 义件卢明 T Image 兄袭，但未使其引用实 
际的图片文件。 

项 FI: HelloLocalImageCode | 义件： MainPage.xaml ( 片段 > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Image Name="image" 

Stretch="None" /> 

</Grid> 

在代 时隐 藏文件中， 只耑 耍添加-行代码来设 S Image 的 Source 属性。 

项 H: Hel loLocal ImageCode | 义件： MainPage.xaml.es (片段 > 

public sealed partial class MainPage : Page 

{ 

public MainPage 0 



读者可能会注意到代码中引用了图片的特殊 URL 。 在 XAML 中，其中的前缀是可 
选的。 

选杼 XAML 还是代码，有没冇什么原则呢？并没有确切答案。除北遇到过度《复，否 
则木人倾向 fU 能的情况 K 使用 XAML , 一般会在遇到个或更多重复时使用 Ibr , 但在 
将标转换为代码之前，也常常允许 XAML 中#在较多这种选择在很大程度 I •.取决 
r 对 XAML tSi 洁程度的要求以及代码维护难易程度的耍求。 

1.7 纯粹的代码 

为了解 Windows Runtime 柯序的 li ’ i 动方 j ^， uf 以读读 OnLaunched 方法 1 It 写的源代 d 
该方法在标准的 App . xaml . cs 文件中。它创建了-个 Frame 对象，通过该对象导航到 
MainPage (该! iitfri / l : 这…被实例化)，然; i "； 通过你态屈 fl : Window - Current 将这个 Frame 对象 
设 W ! 到当前的 Window 对象 I :。 Klfli 是该过程简化后的代码。 

var rootFrame = new Frame(); 

rootFrame.Navigate(typeof(MainPage)); 

Window.Current.Content = rootFrame; 

Window.Current.ActivateO; 


Windows 8 应用程序并不强制耍求使用 Page 类、 Frame 类或任何 XAML 文件。作为木 
章 J & 后 一 节 ，下面 我们创建一个名为 StrippedDownHello 的项 I 」=删除 App . xaml 、 
App . xaml . es , MainPage.xamK MainPage . xaml.cs 以及整个 Common 文件夹。 没错. 将这些 
文件统统删棹。那么项 B 中便4<存在代码和 XAML 文件 f , 只有程序沽中 .( manifest )、 程序 
集信息以及一些 PNG 文件。 

右击项目名称，选择“添加 ”丨 “新建” 。在 “代码”节点中，选择“类”或“代码文 
件”，并将文件命名为 App . cs 。 将以下代码添加到新建的文 件中。 

项 FI: StrippedDownHello I 文件： App.cs(iV©) 

using Windows.ApplicationModel.Activation; 

using Windows.UI; 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Media; 



public class App : Application 

{ 

static void Main(stringU args) 

l 

Application.Start((p) => new App()); 

) 

protected override void OnLaunched(LaunchActivatedEventArgs args) 



Text = "Stripped-Down Windows 8", 

FontFamily * new FontFamily{"Lucida sans Typewriter"), 



Foreground = new SolidColorBrush(Colors.Red ), 
HorizontalAlignment 二 HorizontalAlignment.Center, 
VerticalAlignment = VerticalAlignment.Center 



这就是所需要的全部代码(如果使用 TextBlock 的默认属性， 代码敁 然史 少)。 静态方法 
Main 是程序的入口点。该方法创建了 App 对象，并启动了它。電写的 OnLaunched 方法创 
达了一个 TextBlock 对象，并将其设 H 为应用程序的默认悅口。 

木 Hi 不提侣这样创违 Windows 8应 ffl 程序，这里只是展水这种方 A 的 iij" 行性。 
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Windows 8应用程序巾代码和标记构成，两者各司其职。尽管标记+适合处理复杂逻 
辑和计算，但尽 MJ " 能多地将程序转换为标记仍是明智之举。标记更易于受编辑工具的支 
持，能够沾晰地表达页面的布局。当然，标记中的一切都是字符串，表达复杂对象不免显 
得冗长，另外，由于标记没有编程语 R 所具有的循坏处理能力，因而它不捎 K ： 表达束复性 
的 内容。 

通过 XAML 的语法，其中的一些问题 己经得 到+同程度的解决。本章将介绍其中较为 
甫要的 语法。在开始本话题之前，让我们先来了解一个看似与之完全无关的 内容： 渐变幽 
笔的定义。 


2.1 通过代码定义渐变画笔 


Grid 的 Background M 性和 TextBlock 的 Foreground 厲 性均为 Brush 类型。第1穿的示 
例程序将这两个厲性均设胃为 Brush 的•个 f •类的实例，该子类为 SolidColorBrush 类。本 
演不了如何在代码中创建 SolidColorBrush 类的实例并为其设置 Color 值，这正是 XAML 
嵇后所做的。 

SolidColorBrush 只是四种1蝴笔中的一种。这些_笔的类层次结构如 K 所水。 


Object 



在这些类中，只有 SolidColorBrush 、 LinearGradientBrush > imageBrush 和 WebViewBrush 
类是叮以实例化的。与许多其他图形相关的类一样，大部分 iHi 笔都定义在 
Windows . UI . Xaml.Media 命名空间下，只有 WebViewBrush 位丁 • Windows . UI . Xaml.Controls 

命名空间。 

LinearGradientBrush 能够表现两种或两种以上颜色的渐变效果。 K 面我们通过该 W 笔 
来站示从左到右由蓝色逐渐过渡到红色的文字并将 Grid 的 Background 属性设 W 为另一种 
渐变效果。 

示例项 U GradientBrushCode 在 XAML 中对 TextBlock 进行了初始化，并对 Grid 和 
TextBlock 命了名。 

项 R: GradientBrushCode | 文件 ： Main Page, xaml ( 片段 } 

<Grid Name="contentGrid" 

Background:"{StaticResource ApplicationPageBackgroundThemeBrush)"> 



<TextBlock Name="txtblk" 

Text="Hello, Windows 8!" 

FontSize= M 96 M 

FontWeight= M Bold" 

HorizontaiAlignment=' , Center" 

VerticalAlignment="Center" /> 

</Grid> 

在代码隐藏文件中， MainPage 构造函数创建/两个+同的 LinearGradientBrush 对象， 

分别设宵到 Grid 的 Background 厲性和 TextBlock 的 Foreground 厲性。 

项 GradientBrushCode | 文件 ： MainPage • xaml .cs ( 片段 > 
public MainPage() 

{ 

this.InitializeComponent(); 

// Create the foreground brush for the TextBlock 
LinearGradientBrush foregroundBrush = new LinearGradientBrush(); 
foregroundBrush.StartPoint - new Point(0, 0); 
foregroundBrush.EndPoint = new Point(1, 0); 

GradientStop gradientStop = new GradientStop(); 
gradientStop.Offset = 0? 
gradientStop.Color « Colors.Blue; 
foregroundBrush.GradientStops.Add(gradientStop ); 



gradientStop.Offset = 1; 
gradientStop.Color = Colors.Red; 
foregroundBrush.GradientStops.AdcMgradientStop); 



// Create the background brush for the Grid 
LinearGradientBrush backgroundBrush = new LinearGradientBrush 
( 

StartPoint = new Point(0, 0), 

EndPoint = new Point(1, 0) 

backgroundBrush.GradientStops.Add<new GradientStop 
( 

Offset * 0, 

Color =* Colors. Red 

»)； 

backgroundBrush.GradientStops.Add(new GradientStop 

* 

Offset = 1, 

Color = Colors.Blue 


contentGrid.Background = backgroundBrush; 

) 

i : 述代码使用了两种方式对两个 iwj 笔进行 r 初始化，但这两种方甙是等价的。 
LinearGradientBrush 类定义了类型为 Point 的 StartPoint 和 EndPoint 属性 。 Point S .个结构 
类划，定义了表小 维少 标的 x 和 y 属性。1_笔的定位建、在标准窗口叱标系之即 x 
值随位置从左到心而递增， Y 值随位 Kill I •.而 卜而 递増。 StartPoint 和 EndPoint M 性所定义 
的点是相对的点,相对于_笔所针对的对象。坐标(0, 0>和 (1,0) 分别代表目标对象的左上角 
和右上角。幽笔沿两点所成线段进行渐变， 并 所有的渐变线均 i.j 之 f : 行。 StartPoint 和 
EndPoint 的默认值分别为 (0, 0) 和 (1, 1)，定义了一条从 U 标对象左 h 角到右 F 角的渐变。 
LinearGradientBrush 还有-个名为 GradientStops 的域性，它是 GradientStop 付象 的化 





合。 GradientStop 定义 j ' 相对 ]• 渐变线起点的偏移: 々 OlTset 类咽)和该点的颜色 ( Color 类奶。 
偏移砑的取仇范围•般从0到1,但也•以在该范闹以外，越过 Pi 笔的作用区域。 
LinearGradientBrush 还定义 j ' 两个属性，分别 H _】 P 控制渐变的 il •兑;以及 ii 小 Offset 和 
最大 Offset 之外的效果。 

下图为氺例程序的运行效果。 



如果作: XAML 中定义这两个画笔，标 k ! 的限制便会站现。 XAML 允咋我 们通过 指定颜 
色来定义 SolidColorBrush , 似如采通过 Foreground 或 Background 屈性 来设肾 渐变效果，乂 
应该如何指定起终点以及两个或更多的偏移最和颜色伉？ 


2.2 属性元素语法 

恰好有一种办法。 IH 如前 Ifri 示例所演水的，如果在 XAML 中使用 SolidColorBrush . 
般只需耍指定 Iffli 笔的颜色。 

<TextBlock Text="Hello, Windows 8!" 

Foreground="Blue" 

FontSize= M 96" /> 

SolidColorBrush 的实例是作铬 ； Ti 创述的。 

冇一种©法变形允 I 午我们 W . 式地调川该 Iffli 笔。 符先， 我们将 Foreground M 性移除，将 
TextBlock 儿矣分离力开始标签和结束标签。 



然 JT ；， 在这两 个标签屮插入 W .对幵始和结朵标签。标签名巾允尜名、英文句点和 W 
性名构成。 



</TextB 丄 ock•Foreground 〉 
</TextBlock> 
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S 后，在新建的标签中添加要设 置到属 性上的对象。 



<SolidColotBrush Color="Blue" /> 
</TextBlock.Foreground 〉 



这样， Foreground 便被 M 式设 S 为 SolidColorBrush 的实例。 

这种语法被称为“属性元素语法” ( property-element syntax ), 是 XAML 的歌要特性之 
一。如果初次接触，这种语法可能让人觉得这是标准 XML 的一种扩展或变形，但实际并 
非如此。句点是 XML 元素名称中的有效字符。 

在上段代码中蕴含三种 XAML 语法。 

• TextBlock 和 SolidColorBrush 都是“对象元索” (object element ), W 为这些 XML 
元素会使对象被创建 

• Text 、 FontSize 和 Color 是 “ 属性特性”，是能够用来指定属性设 S 的 XML 特性 

• TextBlock . Foreground 标 i 己是“属性元#”，是以 XML 元索形式表达的属件 
XAML 对属性元素标签有一个 限制： 起始标签不能包含额外的内容。为诚性设 W 的对 

象也必须以内容形式置于起始和结束标签之间。 

Kllri 这段标记也是通过属性元素标签来设賈 SolidColorBrush 的 Color 属性。 

<TextBlock Text="Hello / Windows 8! " 



<SolidColorBrush 〉 



</SolidColorBrush> 

</TextBlock.Foreground 〉 

</TextBlock> 

我们也可以采用同样方式设 S TextBlock 的另外两个属性。 



<TextBlock.Text> 


Hello, Windows 8 



</TextBlock.FontSize> 


<TextBlock.Foreground 〉 

<SolidColorBrush> 

<SolidColorBrush.Color> 



〈 /SolidColorBrush.Color 〉 

〈 /SolidColorBrush 〉 

</TextBlock.Foreground 〉 

</TextBlock 〉 

这样做肴起来没什么意义。对于这些简中.的属性，使用属性特性语法耍史简明。相比 
ifD h • 属性元索语法吏适合表达像 LinearGradientBrush 这样较为复杂的对象。 Klfri 我们从 
厲性元素标签开始说起。还是沿用上®的例子。 
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<TextBlock Text»"Hello, Windows 8!" 

FontSize="96 M > 

<TextBlock.Foreground 〉 

</TextBlock.Foreground 〉 

</TextBlock> 

首先，将 LinearGradientBrush 分为起始标签和结束标签，放置在中间。在起始标签中 
设 K StartPoint 和 EndPoint 厲性。 



请注意，两个类型为 Point 的属性是通过空格分隔两个数字来设置的。 
LinearGradientBrush 的 GradientStops M 性是一个 GradientStop 对象的集合，因而我们 
要通过另外的厲性元素来设背该属性。 



GradientStops 厲性的类切为 GradientStopCollection , l!i 要将该类別的对象添加进来。 



<LinearGradientBrush.GradientStops 〉 
<GradientStopCollection> 


</GradientStopCollection> 
</LinearGradientBrush.GradientStops> 



</TextBlock> 


最后， 在该集合中添加两个 GradientStop 对象。 


<TextBlock 



<LinearGradientBrush StartPoint-"0 0" EndPoint="l 0"> 



<GradientStopCollection> 

<GradientStop Offset="0" Color="Blue" /> 
〈GradientStop Offset="l" Color="Red" /> 
</GradientStopCollecCion> 

</LinearGradientBrush.GradientStops 〉 
</LinearGradientBrush> 

</TextBlock. Foreground 
</TextBlock> 


这样，我们便使用标 iii 表达 r 复杂属性的设腎.。 


2.3 内容属性 

前一节的小例实例化和初始化 LinearGradientBrush 的语法 uj ■能显得有些冗 K 。 如果 K 
现本15前而所水的 XAML 文件都省略/浆忤屈件和元索，就知道这是可行的。卜酣让我们 
看一段标记。 


<Page ... > 



</Grid> 


</Page> 

通过直接使 HJ C# 代码来创建界面，让我们了解到这些 TextBlock 允素会被添加到 Grid 
的 Children 纸合中，而 Grid 会被设置到 Page 的 Content 属性。那么 Children 和 Content 属 
件如何体现在标记中？ 

事实上,这些标记是可以显式添 加的。 属性元素 Page-Content 和 Grid.Children 允许出 
现在 XAML 文件中。 

<Page ... > 


<Page.Content> 



</Page.Content> 

</Page> 

这段标记仍然缺少 Grid.Children 厲性所需的 UIElementCollection 对象。 我们+ 能！ 

地添加该元桌，闵为只有定义无参公共构造函数的类才能 /li XAML 文件中实例化，而 
UlElementCollection 类缺少这样的构造函数。 

这就带来-个 问题： Page.Content 和 Grid.Children 属性元桌•为何小是 XAML 文件强制 
耍求的？ 

原 W 很简中。 XAML 中引用的所有的类允许 (R 只允许)一个属性是“内容”属性。对 
T - 这个内容属性，也仅有这个厲性，对应的属性元索标签不强制耍求。 

类中定义的内容屈性需耍用 .NET 特性 (attribute) 加以修饰。 Panel 类 (Grid 的 父类) 的定 
义利用/一个名为 ContentProperty 的特 ‘IT 。如果该类是用 C# 定义的，那么符起来会像卜 
面 这样： 


①汗注 ： 该 *« 的完牿《称为 ComemPropenyAllribute, 派 'I:. Altribule * 。报 « C# 规 ffi. 使川特性时 . 名称 屮的 Attribute 
SI 馊庥被 « 略 . 编汗器能够 |'| 动解析 • 如朵 使用完粮名称 . il 然可以编 if 通过 , fl! 像 SlyleCop 这 样的代 将该 
问題报汽出术 
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[ContentProperty(Name="Children n )] 
public class Panel : FrameworkElement 


这个特性的含义很简卟。举例來说，如果遇到卜时这样的代码： 

<Grid ... > 

<TextBlock ... /> 

<TextBlock ... /> 

<TextBlock … /> 

</Grid> 

那么通过 Grid 的 ContentProperty 特性， XAML 解析器便将这鸣 TextBlock 儿素添加罕 
Children 属性。 

类似地， UserControl 类 (Page 的父类 ) 将 Content ( 内容 ) 属性定义为内容属性 ( 听 l:i •让人 
觉得这是理所当然的)。 

[ContentProperty(Name="Content")] 
public class UserControl : Control 


我们也可以在定义的类中使用 ContentProperty 特性。为此需要引入 
Windows.Ul.Xaml.Markup 命名空间。 

+ 卞的足，根据 Windows Runtime 文档 ( 在木 |5 截稿前 ') ， ContentProperty 特性只能修饰 
类 ( 如 Panel 类文档首页给出的类定义 ) ，而不能直接修饰属性。如果文档在未来发生 / 变化， 
则通过氺例加以 7 习并保持良好习惯即可 。 1 

肀运的是， I 午多内容属性都是类中最常用的属性。例如 LinearGradiemBmsh 类的内容 
属性被指定为 GradientStopso 虽然 GradientStops 属性的类型为 GradientStopCollection , 但 
XAML + 强制耍求砧 A 设 W. 该集合对象。卜曲是 LinearGradientBrush 的兑幣 /“ 明 。 


<TextBlock Text="Hello, Windows 8! 



<TextBlock.Foreground 〉 



<LinearGradientBrush.GradientStops> 
<GradientStopCollection> 

<GradientStop Offset= ,, 0 M Color«”Blue" /> 
<GradientStop Offset="l" Color="Red" /> 



</LinearGradientBrush.GradientStops> 

</LinearGradientBrush> 

</TextBlock.Foreground 〉 

</TextBlock> 


中的 LinearGradientBrush.GradientStops 诚性和 GradientStopCollection 标签都是小必要的， 
W 而吋以像卜 ‘ 血这样简化。 


①職:至本15中义版战 稿前, 这种限制问样疗在.似也足可以理解的 • &个 类允许存两个或多个内容《性, mm xaml 
IW 必然会出 观歧 义，能 iVVl 个内矜 Wn 作为缺 ft 条件卜 的选项 .， 如尖 ComemPropertyAUributeum 修饰 Wfl:. 那么 
槐; f.w 便 nj 能添加 e 个来修饰不性。们如说只能修饰炎,并且只能修饰-次 (ml 该特性类的定义>,便可以避免这种 mw 
的产屯，也不必 i : •写代码来检 ft 这种错误《 
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<TextBlock.Foreground> 

<LinearGradientBrush StartPoint= M 0 0" EndPoint="l 0"> 
<GradientStop Offset="0" Color="Blue" /> 
<GradientStop Offset="l" Color= ,, Red" /> 



</TextBXock.Foreground 〉 



在保持 XML 有效的前提 K , 标记可以非常简练。 

F 面我们用纯粹的 XAML 来屯写 GradientBrushCode 项0。 


项 R: GradientBrushMarkup | 文件： MainPage.xaml (片段 > 



VerticalAlignment = "Center"> 



<LinearGradientBrush StartPoint="0 0" EndPoint="l 0"> 
〈Gradientstop 0£fset="0" Color=**Blue" /> 
<GradientStop Offset="l" Color="Red" /> 
</LinearGradientBrush> 



即便使用属性元素语法，其可读性也要胜过对应的代码。代码方式 UJ •以淸晰地展水吋 
视树的构建过程，而标记则直观地樾现了 " J * 视树的结构。 

有一点值得注意。假设要为一个带有多个子元素的 Grid 定义一个属性元素。 



可以将属性元素置于底端。 



<Grid.Background 〉 

<SolidColorBrush Color="Blue" /> 
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但不吋以将属性元素混在内容中间。 

<! -- This doesn't work!-- > 



<TextBlock Text= M one" /> 

<Grid.Background> 

<SolidColorBrush Color="Blue" /> 

</Grid.Background 〉 

<TextBlock Text-"two" /> 

<TextBlock Text="three" /> 

</Grid> 

为什么这样+行呢？我们将 Children 属性变成属性元索，答案便 + R 而喻了。 



<Grid.Children> 


<TextBlock Text= H one" /> 
</Grid.Children> 

<Grid. Background 

<SolidColorBrush Color="Blue" /> 
</Grid•Background 〉 


<Grid.Children> 

<TextBlock Texf"two" /> 

<TextBlock Text= M three" /> 

</Grid.Children> 

</Grid> 

Children 属性被定义了两次，这 M 然是不合法的。 

2.4 TextBlock 的内容属性 

第1章的水例程序 WrappedText 展如何以内容形式指定 TextBlock 的文本。然而 
TextBlock 的内容属性并非 Text 属性，而是一个名为 lnlines 的属性，其 类墦为 
lnlineCollection . 该类型可以包含若干 Inline 对象,确切地讲是 Inline 子类的实例。 Inline 
类及其子类定 义丁- Windows . UI . Xaml.Documents 命名空间下。相关类的层次结 构如下 所示。 
Object 

DependencyObject 

TextElement 

Block 

Paragraph 

Inline 

InlineUlContainer 

LineBreak 

Run (用于定义 Text 属性 > 

Span (用于定义 Inlines 属性) 

Bold 

Italic 

Underline 




这些类使我们能够在单个 TextBlock 中指定格式化的文本。 TextElement 定义了 
Foreground 和所^ U ’ i " ■•休相关 的厲性 ： FontFamily 、 FontSize 、 FontStyle 、 FontWeight (用丁 • 
设置字体粗细)、 FontStretch (能够为支持的字体设置伸缩)和 CharacterSpacingc 这些属性被 
所有子类继承。 

Block 和 Paragraph 类主要供 RichTexlBlock 炎使用， / Ti # 是 TextBlock 的汗级版本 ■■第 
16草将详细介绍冇关 RichTexlBlock 类的内容，而本章将屯点介绍 Inline 的派牛.类。 

Run 元索是唯•定义了 Text 属性的类，而该属性恰好也是内容属性 。 InUneCollection 
中的文本内容都会被转换为 Run 对象，除非这些内容已经是 Run 对象。我们也可以显式地 
HJ Run 对象来指定文+卞符串的外种宁•休 M 性。 

'j TextBlock . Span 类也定义了 Inlines 厲性，因而 Span 及其子类可以嵌套 。 Span 
的3个子炎均是某 种快坫 "式 。例 如， Bold 类等价 j •将 Span 的 Font Weight 特性设 W . 为 Bold 。 

K 面我们来分析-个具体 例子。 这段标记定义了一个 TextBlock _/ u 素，在 Inlines 集合 
中添加几个嵌鋁的快诂方式类。 

<TextBlock> 

Text in <Bo 1 d>bo 1 d</Bold> and <ItaliOitalic</Italic> and 
<Bold><Italic>bold italic</Italic></Bold> 

</TextBlock> 

在解析这段标记时，付段零敗的文木部会被转换为•个 Run 对象。那么这个 TextBlock 
的 Inlines 集合便有6个对象,它们的类型依次为 Run 、 Bold 、 Run 、 Italic 、 Run 和 Bold 。 
第一个 Bold 和第-个 Italic 对象的 Inlines 集合都包含-个子 Run 对象•第二个 Bold 对象 
的 Inlines 包含一个 Italic 对象，而这个 Italic 对象的 Inlines 集合又包含一个 Run 对象。 

这个 TextBlock 、 Bold 和 Italic 联昍的水例告诉我们， XAML 语法是以类和厲性为堆础 
的。如果 Bold 类不具有 Inlines 集合属性,那么也就不町能在 Bold 中嵌入 Italic 标签。 

卜而 这个尔例定义了 •个略微有作 复杂的 TextBlock 元索，展4;•了史多格 jA ： 化功能。 

项 0: Text Format ting | 义件： MainPage.xaml < 片段 > 

<Grid Background*"IStaticResource ApplicationPageBackgroundThemeBrush}"> 



<Run FontSize="36">36-pixel</Run> height. 



Here is some <Bold>bold</Bold> and here is some 
<Italic>italic</Italic> and here is some 
<Underline>underline</Underline> and here is some 
<Bold><lCalic><Underline>bold italic underline and 
<Span FontSize="36">bigger and 
<Span Foreground= ,, Red">Red</Span> as well</Span> 

</Underline></Italicx/Bold>. 

</TextBlock> 

</Grid> 

这个 TextBlock 的宽为 400 像桌,因而该元桌不会被胀得过宽。正如下图中第•段文 
本中展示的， Run 元素可用于对文木进行格式化。但如果要使用嵌套的格式(并与几个快捷 
方式类联用)，则需要使用 Span 类及其 f 类。 




第 2 章 XAML 语法 


35 


• 4 le«t in a Time* N 

l. as w«ll at t*xt tn • 


36-pixel 


H«r* i* torn# be 
italic snd n#r# n 
here is som# bold italic undtrlfnr 

and bigger and Red as 
well 


+ 难看出， LineBreak 元素 Kl* 以实现在仟意处断行。理论 1: ， InlineUIContainer 类允 1 午 
作文木中嵌入仟意 UElement ( 如 Image 元 素）， 但实际只有 RichTextBlock 支持 
InlineLHContainer 类，而 TextBlock 不支持。 


2.5 画笔和其他资源的共享 

假设页 Iftih 有多个 TextBlock ,但希望它们共皁同一个國笔。如果使用的是 
SolidColorBrush . 那么 'S 复标记并无 大碍。 ftl 如果是 LinearGradientBrush . $复的标记便会 
显得 冗长。 定义 LinearGradientBrush 至少需要定义6个标签， 重复这 样的标记让人感到非 
常乏味，尤其是要修改代码的时候。 

Windows Runtime 有一种叫 “XAML 资源”的功能，允许我们在多个元素之间共享对 
%。 共享画笔是 XAML 资源的应用之一，而应用最多的是用来定义和共享样式。 

XAML 资源一般部存在 ResourceDictionary 类的对象中，后者是键和值均为 object 类咽 
的7-典。但键的实际类哦一般是字符串。 FrameworkElement 和 Application 都定义了 一 个名 
为 Resources 的属性，其类型为 ResourceDictionary » 

示例项 [i SharedBrush 展示了在一个页面中的多个元素间共享一个 
LineaiGradientBrush (和其他几个 对象) 的常规方法。 XAML 文件的顶部定义了一个 Resources 
属性元桌，其中包含奴面要用到的资源。 

项 H: SharedBrush | 文件： MainPage.xaml < 片段） 

<Page ... > 

<Page.Resources 〉 

<x:String x : Key="appName">Shared Brush App</x:String> 

<LinearGradientBrush x:Key»"rainbowBrush"> 

〈Gradientstop Of£set="0" Color="Red" /> 

<GradientStop Offset="0.17 M Color="Orange" /> 

<GradientStop Of£set="0.^3" Color»"yellow M /> 

<GradientStop Offset="0.5" Color="Green" /> 

<GradientStop Offset="0.67" Color="Blue" /> 

<GradientStop Offset="0.83 M Color="Indigo" /> 

<GradientStop Offsets"1" Color="Violet" /> 

</LinearGradientBrush> 














</Page.Resources> 


</Page> 

XAML 文件接近顶部用来定义资源的部分叫“资源区段 ” （resource section )。 对； F •上面 
这段标记 ， Resources 7 -典 中初始化了 4个 + 同 类型： String 、 LinearGradientBrush , FontFamily 
和 Double 。 遗注意， String 和 Double 标签有 “ x ” 前缀。这两个类型是 . NET 框架提供的基 
本数据类型，而非 Windows Runtime 提供，因而它们不在默认的 XAML 命名空间中。类似 
的类型还包括 x : Boolean 和 x : Int 32. 

还要注意的是，这些资源中的对象都有 x : ICey 特性。 x : Key 特性只在 Resources 字典屮 
有效。顾名思义， x : Key 特性代表资源在字典中的键。 

在 XAML 文件的主体中，引用资源时使用这个键，但要用到-•种叫 “ XAML 标记扩 
展”的特殊标记。 

XAML 标记扩展有几种，它们箸的特点是都带有大括号。 用于 引用资源的标记扩 
展由关键字 StaticResource 和被引用资源的键构成。事实上，我们 L ： 经见过无数次 
StaticResource 标记扩展了，为默认的 Grid 提供背 ftlffli 笔用的就是这种语法。这个小•例 
XAML 文件的电体部分通过 StaticResource 标记扩展获取了定义在 Resources 7’•典中的资源。 

项 H: SharedBrush | 文件： MainPage.xaml ( 片段 } 










■程序 的运行效果如下图所4。 



Top 


Left 

Shared Brush App 乂 j gh [ 


Bottoi 



这段标记有几点盅要说明。 

4个 TextBlock 元素各自都引用了 3个资源，只是为了演示标记扩展的使用，但这种做 
法有悖丁-一种更高效的技术，即“样式”。有关样式的详细内容本章稍后会做 介绍。 

从语法 hi 并，在 XAML 文件中使用资源之前必须定义它们。这也就是为什么 Resources 
字典一般都! II 现在 XAML 文件顶部 R 定义在根元索上的原因。 

FrameworkElement 的派生类都支持 Resources '? ■•典 ， H 而叫以在 " J " 视树的分支 I :定义 
资源。单个 Resources 字典内的键必须唯一，但不同字典之间键可以相同。在遇到 
StaticResource 标记扩展时， XAML 解析器会搜索 uj ' 视树，并选择 S 先遇 到的 。 Resources 
的值可以在分支处被重写。 

如果 XAML 解析器无法在4视树中找到匹配的键，则会在 Application 对象的 Resources 
字典中杳找。 App . xaml 文件中也可以定义资源，但这些资源巾整个应用程序共享。为在多 
个应用程序之间共享资源，■以创建中.独的 XAML 文件，定义一个名为 ResourceDictionary 
的根元素，并添加要共享的资源。然后将这个 XAML 文件添加到要引用这些资源的项 H 中， 
并在该项 H 的 App . xaml 文件中导入该文件的内容，这样便 iij " 以在该项 H 中使用这些资源/。 

在针对 Windows 8应用程序的项 El 模板中 ， Visual Studio 碰巧提供了一个例子。 
Common 文件夹包含一个名为 StandardStyles . xaml 的文件，该文件根元桌的类型就是 
ResourceDictionary 0 

<ResourceDictionary 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 


该文件被默认的 App . xaml 文件引用。#实上,默认的 App . xaml 文件也恰好展示了引 
用资源集合的方法。 

〈Application 

x:Class="Appl.App" 

xmlns="http: // schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local-"using:Appl"> 




<Application.Resources 〉 

<ResourceDictionary> 

<ResourceDictionary.MergedDictionaries> 

<ResourceDictionary Source="Common/StandardStyles.xaml"/> 
</ResourceDictionary.MergedDictionaries> 



X / 添加资源， uf 以在 MergedDictionaries 集合中插入 ResourceDictionary 标签，也 Kl * 以 
直接在 App 对象的 Resources 字典中添加资源。 .. 

卜‘面这段代码演沿了如何通过代码访问 Resources 字典。在 InitializeComponent 方法调 
用的后而，我们可以通过索引器从字典获取资源。 

FontFamily fntfam = this.Resources I"fontFamily H ] as FontFamily; 

" J * 以做这样一个试验：在 MainPage.xaml 文件中注释掉 fontFamily 资源。在 MainPage 
的构造函数 InitializeComponent 方法调用的前面，将该资源添加到宁•典中。 



在 XAML 文件被 InitializeComponent 解析时，该资源便吋以在 XAML 文件中被引用了。 
ResourceDictionary 类未定义在可视树父对象中搜索字典的公共方法。如果要在代码中 
搜索资源 ， Kf 以使用 FrameworkElement 定义的 Parent 厲性和 Windows . Ul . Xaml.Media 命名 
空间定义的 VisualTreeHelper 类来搜索吋视树。应用程序的 Application 对象可以通过静态 
属性 Application.Current 获得。 

MSDN 文档似乎并未介绍预定义的资源（如 Grid 引用的 
ApplicationPageBackgroundThemeBrush ), 彳4我们"丨以在以卜文件中找到相关的值(该文件定 
义了 Default 、 Light 和 High Contrast 这3个主题，都具有预定义资源)。 


何两个歌要的预定义资源，第一个资源的标 i 只符为 ApplicationPageBackgroundThemeBrush ， 
另一个是紧跟其 dj ApplicationForegroundThemeBrush。ApplicationForegroundThemeBrush 
在浅色主题中呈现黑色，在深色主题中呈现白色。如果希 槊使用 --个 U 背景有适当反差的 
颜色(稍后会介绍)，则以使用它。如果需要一种 b 背景和前景都有反差的尚亮颜色，吋 
以使用 UlSetlings 对象的 UIElementColor 方法并传入枚平成员 Highlight , 该方法会返回所 
需要的 Coloi ■对象、 

2.6 资源是共享的 

资源对象真的在引用它们的对象间得到共孪吗？对于毎次引川， StaticResource 难道+ 
会创逑新的实例吗？ 


① if 注： 原15为 SolidColorBmsh 对象 • 可实^为 Color X•丨象。这 M 加以史 d •:。想了解该 /T 法的史衫信总 • "T 以认 问以卜 W 址: 
http://msdn.microsol\.com/zh-cn/library/windows/apps/br229470。 
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为解除这个疑惑，在 SharedBrush . xaml.cs 文件中， InitializeComponent 方法调用的 

插入以下代码。 

TextBlock txtblk = (this.Content as Grid).Children[ 1 ] as TextBlock; 
LinearGradientBrush brush = txtblk.Foreground as LinearGradientBrush; 



这段代码通过 Grid 的 Children 集合引用了的第.个 TextBlock 的 LinearGradientBrush 
对象,修改了 StartPoint 和 EndPoint 属性。请注意，所有引用 LinearGradientBrush 的 TextBlock 

元素均受到了影响，如下图所示。 



Itl 此町以得出 结论： 资源是共享的。 

另外，未被引用的资源同样会被实例化。如果有兴趣.也可以加以验证。 

2.7 探究矢量图形 

前面介绍过， / l : Windows 8应用程序中文木和图片要分别创纽 TextBlock 和 Image 
对象，并将其附加到可视树匕其中并未涉及“绘制”的概念，至少在应用程序层面没有。 
A - Windows Runtime 内部 ， TextBlock 和 Image 元袭都能够呈现 ( render>fi 夂。 

类似地，如 果要敁 示某些矢最图形（如直线、曲线和填充的区域），我们并+调用 
DrawLine 和 DrawBezier 这样的方法。事实 I :,这些方法在 Windows Runtime 中也并小存 
在。 DirectX 提供了类似的方法，可以在 Windows 8应用程序中使用， 但如 果使用 Windows 
Runtime , 则志要通过创建 Line 、 Polyline , Polygon 和 Path 对象来实现。这些类派生自 Shape 
类(派牛-自 FrameworkElement ). 定义 T Windows . Ul . Xaml . Shapes 命名空间。该命名空 M 定 
义的类型一般统称为“图形库 ” （Shapes library )。 

Polyline 和 Path 类是图形库的主要成员。 Polyline 用 f - 呈现一系列相连的直线，但其真 
正的强大之处在于绘制复杂曲线。在绘制曲线时，要使毎段直线尽最短并提供足够的 S 。 
M 过 Polyline 添加数以 THI •的直线不成 M 题，它捎长于此。 

卜 _ 血我们 HJ ?01>^ 狀来 _ 一条“阿搞米德螺旋线” (Archimedean spiral )。 i 例程序 Spiral 
的 XAML 文件初始化了一个 Polyline 对象，但并未添加绘制该图形的点。 

项 H : Spiral I 义件： MainPage• xaml UV 段） 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrushI"> 

<Polyline Name="polyline" 
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Stroke="{StaticResource ApplicationForegroundThemeBrush)" 

StrokeThickness="3" 

HorizontalAlignmem ： = , ’Center" 

VerticalAlignment*"Center" /> 

</Grid> 

Stroke 属性(继承丁‘ Shape ) 包含用丁-绘制直线的 _ 笔。该 W 笔•般为 SolidColorBrush 类 
型.但并非必须如此 ( il : 如稍后耍介绍的)。这段标记通过 StaticResource 指定了预定义的资 
源。该资源能够在深色主题下提供白色 W 笔，在浅色主 题卜提 供黑色幽笔。 
StrokeThickness (继承丁 - Shape ) 用丁-指定直线的宽度，中.位为像素。此外，这段标记还包含 
我们之前用过的 HorizontalAlignment 和 VerticalAlignment 。 

力一 个矢切 :阁形指定 HorizontalAlignment 和 VerticalAlignment 似乎让人有_困惑 。这 
里有必要解释一 F 。 

二维矢《图要用到笛卡儿平标系和 ( A ； 形式的咆标点。其中， A ■为横轴屮标， Y 为纵 
轴肀标 。 Windows Runtime 中的矢最图所采用的定位方式 1 j 窗口环境密切相关。义的值随位 
1：右移而递増(合7•数学惯例)，但 K 值随位 S K 移而递增(与数学惯例相 反)。 

xm r 的值-•般是正数，原点 (0,0) 位于图的左上角。 

负数平标用 r 表示纵轴以左和横轴以上的点。在计算布局时 ， Windows Runtime 会忽 
略矢 ® 图对象 的负数來标。挙例来说，假设耍绘制一个折线，一条线段的 A ■平标 范围从 -100 
到300, P 來标力400,另一条线段 X 平标为300, F 平标范_从-200到400。这意味着这 
个折线理论 I •.貝 :有 400像尜宽，600像索 卨。 但在布局和对齐屏幕 / T 7, 这个折线看起來只 
有300像蒺宽. 400像# 高。 

为使得矢暈图在 Windows Runtime 中的布局系统中均以对预见的方式处理，规定灰 
角为 (0,0) 点。在布 局层面 I :讲，可见点 的义坐 标最大正值为元素的宽， y 叱标最大正值为 
元索的髙。 

为指定平标点， Windows . Foundation 命名空间提供 j " Point 结构。该结构具有两个 double 
类甩的厲性 A •和 y 。 此外， Windows . Ul . Xaml . Media 命名空间还提供了 PointCollection 类艰 
来作为 Point 对象的集合。 

Polyline 本身只定义了一个 PointCollection 类型的属性 Points » /£ XAML 中，吋以将点 
的集合赋给 Points 属性，但通过某种兑法计算得到的点，则要通过代码添加。在示例程序 
中， MainPage 类'的构造函数通过一个 for 循环将角度从0递增到3600,刚好绘10阐。 

项 R: Spiral I 文件： MainPage.xaml.cs{ 片段） 

public MainPage() 


for (int angle = 0; angle < 3600; angle++) 

Math.PI * angle / 180; 
angle / 10; 

radius * Math.Sin(radians); 
radius • Math.Cos(radians); 
Add(new Point(x, y)); 



① ifit : 取义为 Spiral . 中不 /" I :这个 t 报枞卜 而的 f 例 可知. 作各耍 衣达 的足 MainPage 。 



循坏体的第一步将角度转换为弧度并赋给变最 radians , 以便供下 ffl . NET 的三角函数使 
用。变最 radius (半径)根据角度计算得到，范圃从0到360,也就是说，最大半径为360。 
静态方法 Math . Sin 和 Math . Cos 返回的值乘以半径得到横纵少标，范围均在_ 360到 360( 像 
索)之间。 

我们需要平移此图形，以使所有像素点相对于左上角都是正值。为此，要在这两个乘 
积上各加上360。这样,螺旋线的中央便是 (360, 360), 并且各方向的边界不超360像素。 

循坏体的 M 后一步创建丫 Point 结构的实例，并将其添加到 Polyline 的 Points 集合中。 
程序运行的效果如 K 图所示^ 



若没有 HorizontalAlignment 和 VerticalAlignment 设 S ， 此图形则 1 的左卜.角对 
齐。如果在 il •算时+调整螺旋线中心的位 S , 那么它的中心则会在豇血的左上角，并且有 
四分之•:的部分都不 Kf 见。如果将 HorizontalAlignment 和 VerticalAlignment 设 W 力 Center . 
但+调粮螺旋线的中心，那么图形则会偏向左上方。 

这个螺旋线几乎充满了屏幕，但这只是因为本人屏椿的高度为768像素。如果+论屏 
幕大小都使螺旋线充满粮个屏幕，该怎么做？ 

一个方案是直接将屏幕的分辨率代入螺旋线惭标的计算中。我们会在第3章中了解到 
如何实现。 

另-个方案要用到 Shape 类定义的一个名为 Stretch 的属性。该属性与 Image 的 Stretch 
属性用 法完今一致。 Polyline 的 Stretch 性默认为枚举成员 Stretch . None (+拉伸)。但我们 
|| J 以将其 设背为 Uniform , 以便在保持长宽比的前提卜'使图形充满容器。 

示例项 U StretchedSpiral 演示了这个方案。此外， XAML 文件将线调得吏宽。 

项 StretchedSpiral I 文件： MainPage.xaml ( 片段） 

<Grid Background 3 "{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Polyline Name="polyline" 

Stroke="(StaticResource ApplicationForegroundThemeBrush)" 

StrokeThickness="6" 


在代码隐藏文件中，螺旋线乎标 的汁算 叮以使用仟意 T : 径。¥•例中螺聢 线的最 大半径 

为 1000。 
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項 H: StretchedSpiral I 文件： MainPage.xaml .cs ( 片 段） 
public MainPage() 



for (int angle =0; angle < 3600; angle++) 

[ 

double radians * Math.PI * angle / 180; 
double radius = angle / 3.6; 
double x = 1000 + radius * Math.Sin(radians); 
double y = 1000 - radius * Math.Cos(radians); 
polyline.Points.Add(new Point(x, y)); 

) 

) 

这个示例在计算纵平标 y 时将原来的加号改成了减号，因而螺旋线终点的位置从卜'端 
变成了上端(如下图所 示)。 此外，这里还使用 ApplicationForegroundThemeBrush 资源，以 
便在切换到浅色主题时方便地修改 Stroke 颜色。 



如果将 Stretch 属性设置为 nil , 圆螺旋线将变成椭_螺旋线。 

读者能还记得，不论目标乂素的大小 LinearGradientBrush 画笔都能够动适应。该 
幽笔也能够适应矢最图。下面让我们了解-下 ImageBrush 元素，它是一 种蓰于 位图的 ffii 笔。 

示例项目 ImageBmshedSpiral 的代码隐藏类与示例项目 StretchedSpiral 中的一样，但 
XAML 文件将线宽增大许多并利用了 ImageBmsh 。 

项 fl: ImageBrushedSpiral | 义件 ： MainPage .xami { 片段 > 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Polyline Name="polyline" 

StrokeThickness-"25" 

Stretch="Uniform"> 



<ImageBrush ImageSource»"http : //www.charlespetzold.com/pw6/PetzoldJersey.jpg" 
Stretch="UniformToFi11" 

AlignmentY="Top" /> 



'v Image 的 Source 厲性一抒 ， ImageBrush 的 ImageSource 属性的类 吧也力 ImageSource 。 
在 XAML 中，我们只需要为该 lii 笔设置一个 URL 。 ImageBrush 有自己的 Stretch 厲忡，默 
认值为 nil 。 也就是说，位图会被拉伸以填充粮个区域，而+会保持图•的长宽比。对丁-示 
例所用到的图片，这种设 S 会让其中的人物 uj •能看起来胖一些，冈而将其设賈为 
UniformToFill . 该设胥会保持图片的长宽比并使图片填充牿个区域。与此同时，图片的一 
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部分会被哉掉。 AlignmentX 和 AlignmentY "丨用于控制图片与图形的相对位置，从而决定 
哪一部分被 哉掉。 如下图所示，这个示例倾向于将图片的下部裁掉，只露出人物的头部 



诂注总，图片是按螺旋线的几何线对齐的，而并未按25像素宽的线条对齐。这使得 h 、 
左、右的边缘貌似被削掉了。这个问题 nj •以通过 ImageBrush 的 Transform 属性解决，但这 
不在本章的讨论范围内。 

ImageBrush 类派生自 TileBmsh 。 这个继承关系意味着 uj •以使位图在水平和竖直方向铺 
开，但 Windows Runtime 不支持这一功能。 

任何吋通过函数描述的曲线，均 nJ •以通过 Polyline 来呈现。但如果要绘制复杂的弧线(椭 
_的弧二次 W 塞尔 曲线 (标准形式)或#二次贝寒尔曲线(只有一个可控点)，则+耑要 
使用 Polyline 。 这些类型的曲线育接受 Path 元素支持。 

Path 本身只定义了一个叫 Data 的厲性，其类型为 Windows . Ul . Xaml . Media 命名空间下 
的 Geometry 类。 / l : Windows Runtime 中， Geometry 和相关的类代表纯粹的解析儿何图形。 
使叫 Geometry 对象可以通过坐标点定义直线和曲线， Path 会通过选定的 Iffli 笔和指定的粗细 
将线条呈现出来。 

在 Geometry 派生类中，设强大且最灵活的是 PathGeometry 类。 PathGeometry 的内容 
属性为 ngures , 即 PathFigure 对象的集合。每个 PathFigure 代表一系列相连的直线和曲线。 
PathFigure 的内容属性是 Segments , 即 PathSegment 对象的集合。 PathSegment 的子类包括 
LineSegment 、 PolylineSegment 、 BezierSegment 、 PolyBezierSegment > QuadraticBezierSegment > 
PolyQuadraticBezierSegment 和 ArcSegment 。 

下面，我们使用 Path 和 PathGeometry 来绘制一个 HELLO 。 

项 H: HelloVectorGraphics | 文件： MainPage.xaml ( 片段 } 

<Grid Background*"(StaticResource ApplicationPageBackgroundThemeBrush)"> 



HorizontalAlignment-"Center" 

VerticalAlignment="Center"> 

ith.Data> 

<PathGeometry> 

<!— H —> 


① im ： 明中人物 | K 足作者本人 《 
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<PathFigure StartPoint="0 0"> 
<LineSegment Point="0 100" /> 


</PathFigure> 

<PathFigure StartPoint='*50 0"> 
〈LineSegment Point="50 100" /> 



<!— E --> 

<PathFigure StartPoint-"125 0"> 

<BezierSegment Point1»"60 -10" Point2»"60 60" Point3="125 50” /> 
<BezierSegment Pointl- M 60 40" Point2="60 110” Point3-"125 100" /> 
</PathFigure> 



<PathFigure StartPoint c "300 50"> 

<ArcSegment Size="25 50” Point="300 49.9" IsLargeArc="True" /> 



</Path.Data> 

</Path> 

</Grid> 


每个字符巾一个或多个 Path Figure 对象构成。 PathFigure 要求指定相连线段的起点。 
PathSegment 的派生类都会从该起点出发。例如，为绘制字母 E , BezierSegment 要通过两 
个点来控制开始和结束。前一个 BezierSegment 的终点为后一个 BezierSegment 的起点。（在 
使用 ArcSegment 时，弧的终点不能4起点相同，否则图形+会被绘制。这就是为什么氷例 
中设置了 0.1 像素的间隔。避免出现问题的另一个办法是使用两个 ArcSegment , 各用绘 
制两半椭圆弧。） 

饵实上，使用一对 W 寒尔曲线并非绘制大写字母 E 的最佳方式(如下图所示)。 






荇将 Path 的 Stretch 属性设 iff 为 Fill , 则会得到一个充满整个屏幕的 “ hello ” 图形(如卜— 
图所示)。 


当然，也吋以在代码中组合使用 PathFigure 和 PathSegment , 但我们不妨了解-种在 
XAML 中定义图形的简便方法。有一种“路径标记语法” (Path Markup Syntax ), 每段指令 
由中.字母开始，在必要时提供叱标点、尺十和布尔值 1; 。这种语法能够极大地减少标记最。 
/ j ;- 例项 14 HelloVectorGraphicsPath 使川这种语法绘制了 1 j HelloVectorGraphics 相同的图形。 

项 FI: HelloVectorGraphicsPath I 文件： Main Page, xaml ( 片段 } 

<Grid Background:.. {StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Path Stroke= M Red" 

StrokeThickr»ess= M 12 w 

StrokeLineJoin= M Round" 

HorizontalAlignment="Center" 

VerticaiAlignnvent="Center" 

Data="M 0 0 L 0 100 M 0 50 L 50 50 M 50 0 L 50 100 

M 125 0 C 60 -10, 60 60, 125 50, 60 40, 60 110, 125 100 
M 150 0 L 150 100, 200 100 



Data 属性被设置了一个很 i <: 的字符串，这里将它分成了 5行，对应5个字母图形。 M 
是“移动”命令，后 [fii 跟平标点的 X 和 Y 值。这个点作为_笔的起点。 L 用于绘制线段(吏 
准确地说是多段 线). 活面跟-个或多个点。 C 是飞次 W 塞尔曲线命令，后面依次跟两个控 
制点和一个终点。 A 是椭圆弧线命令，是这复杂的。前两个数字'分别代表椭圆的 X 
轴半径和 Y 轴半径，第三个数字用丁•控制椭圆旋转的度数。后面两个数字分别用于控制 
isLargeArc 标 i 只和是否按照 IH 角方向绘制弧线。最后的两个数字用1••指定终点。这里有一 
个 Z 命令 a 未被用到，但它比较常用。该命令能够绘制一条返回起点的直线，将图形闭合。 

使 ffl •系列“路径标记语法”來定义复杂几何图形，是只能在 XAML 中完成的任务之 
— 。 Windows Runtime 未公幵貞接提供这种功能的类。只有 XAML 解析器 "J •以在内部使用。 
力在代码中将 “ 路径标记语 R ” 字符串转换为 Geometry 对象，盅要通过某种方式在代码中 
将 XAML 转换为对象。 


① if 注：这甩的 4 尔数 7 宋衣水 . 即0代灰 false. I <1；^ true. 

② 评注 . z 指令也叫 •• 关 闭指令”。 



系统中恰好有这种转换工具，即 Windows . UI . Xaml.MarkupXamlReader 命名空间 F 的 
XamIReader.Load 静态 方法。 传入 XAML 字符串，该方法会对树进行初始化和组装，最后 
输出根元素的实例。虽然 XamlReader.Load 有些限制(例如+能解析外部代码中的事件处理 
程序)，但是它仍是非常强大的工具。第8章有一个叫 XamICruncher 的示例项目，它允许 
我们方便地进行有关 XAML 的试验。 

这个示例项 I ：彳展示了如何在代码中使用 Path 和“路径标记语法”。 

项 FI: PathMarkupSyntaxCode I 文件： MainPage.xaml < 片 段） 
using Windows.UI; // for Colors 

using Windows•UI.Xaml; 
using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Markup; // for XamlReader 

using Windows.UI.Xaml.Media; 

using Windows.UI.Xaml.Shapes; // for Path 

namespace PathMarkupSyntaxCode 
{ 

public sealed partial class MainPage : Page 

{ 

public MainPage() 

( 

this.InitializeComponent(); 

Path path = new Path 

( 

Stroke = new SolidColorBrush<Colors.Red), 

StrokeThickness = 12, 

StrokeLineJoin ■ PenLineJoin.Round, 

HorizontalAlignment = HorizontalAlignment.Center, 

VerticalAlignment - VerticalAligrunent.Center, 

Data = PathMarkupToGeometry( 

"M 0 0 L 0 100 M 0 50 L 50 50 M 50 0 L 50 100 •，+ 

*'M 125 0 C 60 -10, 60 60, 125 50, 60 40, 60 110, 125 100 *' + 

"M 150 0 L 150 100, 200 100 " + 

n M 225 0 L 225 100, 275 100 M + 

"M 300 50 A 25 50 0 1 0 300 49.9") 

)； 

(this.Content as Grid).Children.Add(path); 


Geometry PathMarkupToGeometry(string pathMarkup) 

{ 

string xaml = 

"〈Path " + 

"xmlns=•http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" + 
" 〈 Path.Data〉" + pathMarkup + "</Path.Data></Path>"; 

Path path = XamlReader.Load(xaml) as Path; 

// Detach the PathGeometry from the Path 
Geometry geometry = path.Data; 
path.Data = null; 
return geometry; 


在代码中使用 Path 类时有一点需要特别 注意 ： Visual Studio 生成的 MainPage . xaml.es 
文件并未包含相关代码来引入 Path 所在的 Windows . UI . Xaml . Shapes 命名空间，似该文件引 
入了 System . lO 命名空间。虽然 者也 定义了 Path 类，但用于编辑文件和 W 录路径。 

代码底部的方法是最关键的。该方法牛.成了一小段 XAML 。 这段 XAML 将 Path 作为 



根元素，通过属性元索语法包裹了 “路径标记语法”字符串。注意，这段 XAML 中必须包 
含引用标准 XML 命名空间的卢明。如果 XamlReader . Load 未遇到错误，它将返回一个 Path 
对象，其 Data 属性会被设腎为一个 PathGeometry 对象。在与当前 Path 取消关联之前， 
PathGeometry 对象+能关联另一个 Path 对象。为取消关联， uj •以将 Path 的 Data 设置为 null 。 

2.8 通过 Viewbox 实现拉伸 

Image 类和 Shape 类都定义了 Stretch 属性，能够根据容器的大小拉伸位图和矢最图形， 
但并非 FrameworkElement 的所有派屯类都支持这样一个属性。到底为何要通过 Viewbox 
实现对 TextBlock 之类 Li 经支持 Stretch 属性的元素进行拉伸呢？ 

有时我们耑要以特殊方式进行拉伸。假设要显示一系列带有文木标题的对象。每个标 
题受限 P 特定的矩形区域，同时小同的对象和标题 m 合需要看起来一致。文本的长度是可 
变的(例如来0用户的输 入)。 如果文本字数过多，则希望它缩短一些，以便其能够适应所 
在的矩形区域。虽然可以在代码隐藏类中汁算适当的 FomSize , 但最好使 TextBlock 自动调 
粮大小以适应特定空间。 

Viewbox 正捎!_<:于此。该元素有一个 Child 属性，类咽为 UlElemenU Viewbox 能够将 
子元素拉伸到 G 身大小。与 Image 和 Shape -样， Viewbox 也定义了 Stretch 厲性。该属性 
的默认值为 UniformC'j Image . Stretch 属性的默认 值一柞 >。示例程序将 Stretch 设筲为 Fill , 
从而忽略 TextBlock 的长宽比，使其充满粮个屏嵇。 

项冃 ： TextStretch | 文件： MainPage.xaml (>V©) 

<Grid Background:"IStaticResource ApplicationPageBackgroundThemeBrush}"> 

<Viewbox Stretch=>"Fill.'> 

<TextBlock TextSt retch Windows 8!" /> 



TextBlock 会 il •算其自身包含“变音符”和“下伸部”的高度，即便两者未出现在这段 
文木中。这就是字母没有完全扩展至窗口高度的原因。 

当然，这段文本原本的 K 宽比随着缩放 发生了 变化， 如卜图 所示。 

W1W! 


与 Image 和 Shape +同的是， Viewbox 定义了 StretchDirection 属性，可选的值包括 
UpOnly 、 DownOnly 和 Both (默认值)。 Viewbox 通过改设 W 来确定是只増大子元索、只缩 



小或者视情况而定。 

K 面将对示例项目 HelloVectorGraphics 进行修改，使每个字现小问颜色。我们 
法通过中.个 Path 的 Stretch 属性使所有字母都符合窗口的品度，因为毎个字母的卨度小同。 
为此，需要 将中个 Path 拆分成5个不同的 Path 元索。 

卜一面，我们将5个 Path 元素置于一个 Grid 中，将这个 Grid 放入 Viewbox 。 

项目 ： VectorGraphicsStretch | 义件： MainPage.xaml ( 片段） 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 



<Path Stroke="#C00040 H 

StrokeThickness="12" 

StrokeLineJoin="Round" 

Data="M 125 0 C 60 -10, 60 60, 125 50, 60 40, 60 110, 125 100" /> 



Data="M 150 0 L 150 100, 200 100" /> 



Data="M 300 50 A 25 50 0 1 0 300 49.9" /> 

</Grid> 

</Viewbox> 

</Grid> 

这样，不同矢量图形便会被肴作一个整体进行缩放(如 K 图所示)。 
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有一点需耍 注意， 通过 Viewbox 实现的拉伸会改变笔画 ( stroke ) 的宽度，而通过 Path 
ti 身的 Stretch 实现的拉伸小会。 


2.9 样 式 

本章介绍了如何 将画笔 定义为资源，从而在不同元素间共享。资 源最敢 要的作用是定 
义样式，而样式表现为 Style 的实例。简单地讲，样式是吋以在多个元素间共享的属性集合。 
样式不仅能减少軍复的标 C ,还能够实现属性设置的统筹管理。 

在木节讨论过后，对于 Common 文件夹卜 Visual Studio 生成的 StandardStyles.xaml 文 
件，您将能够读懂大部分内容。其中的 ControlTemplate 将在第11章中介绍。 

/ J ; •例项 LI SharedBrushWithStyle 4之前的示例项 tJ SharedBrush 类似，只+过前者通过 
Style 合并 T 集合 M 性。¥例样式位 P Resources 区段的底部。 

项目： SharedBrushWithStyle | 文件： MainPage.xaml (片段 } 

<Page.Resources 〉 

<x:String x:Key="appName">Shared Brush with Style</x:String> 


<LinearGradientBrush x:Key» M rainbowBrush"> 
<GradientStop Offset="0" Color="Red" /> 
<GradientStop Offset= M 0.17" Color="Orange" /> 
<GradientStop Offset="0.33 H Color="Yellow" /> 
<GradientStop Offset 3 "0.5" Color="Green" /> 
<GradientStop Offset= M 0.67 n Color="Blue" /> 
<GradientStop Offset="0.83" Color= M Indigo" /> 
<GradientStop Offset="l" Color="Violet" /> 



<Style x : Key="rainbowStyle" TargetType="TextBlock M > 

〈Setter Property="FontFamily" Value="Times New Roman" /> 

<Setter Property="FontSize" Value="96" /> 

<Setter Property="Foreground" Value*"{StaticResource rainbowBrushJ" /> 

</Style> 

</Page.Resources 〉 

与符通的资源一样， Style 的开始标签也包含 x:Key 特性。此外， Style 还要求指定 
TargetType 特性，其值必须为 FrameworkElement 或其子类。样式只能作用丁- 
FrameworkElement 的派牛.类。 

这个 Style 的主体当中包含一组 Setter 允桌，并为每个 Setter 指定 Property 和 Value 特 
其中的一个 Setter 通过 StaticResource 将 Value 特性设 W 为之前定义的 
LinearGradientBrusho 需要注意的是，为使这种引用能够牛.效，在 XAML 文件中， Style 必 
须在被引用的_笔之后定义，但样式吋以在可视树分支的某个“资源区段”中定义。 

元素需耍通过自身的 Style 属性来引用样式。^引用资源一样，引用样式也需要使用 
StaticResource 标记扩展。 

项 R: SharedBrushWithStyle | 义件： MainPage.xaml ( 片段 > 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<TextBlock Text="{StaticResource appName}" 



HorizontaIA1ignment="Center" 
VerticalAlignment»"Center" /> 

<TextBlock Text="Top Text" 



HorizontalAlignment«"Center' 
VerticalAlignment»"Top" /> 



Style="{StaticResource rainbowStyle)" 
HorizontalAlignment="Left" 
VerticalAlignment*"Center" /> 

<TextBlock Text="Right Text" 

Style= M {StaticResource rainbowStyle)" 
HorizontalAlignment»"Right" 
VerticalAlignment="Center" /> 



Style="{StaticResource rainbowStyle}" 
HorizontalAlignment="Center" 
VerticalAlignment="Bottom" /> 



这个 i 例的界 Iffi 与之前 SharedBrush 小例的界面是一样的。 

通过 Style 来定义 LinearGradientBrush 还冇另外一种方式。为通过较复杂标 i 己來定义策- 
个对象，我们往往会在元素 h 使用“属性元尜语法”。与之类似，我们也"]"以对 Setter 类 
的 Value 使用这种语法。 

〈Style x : Key="rainbowStyle" TargetType="TextBlock"> 

<Setter Property="FontFamily" Value="Times New Roman" /> 

〈Setter Property="FontSize" Value="96" /> 



<LinearGradientBrush> 


<GradientStop Offset="0" Color="Red" /> 
<GradientStop Offset="0.17" Color="Orange" /> 
<GradientStop Offset="0.33" Color="Yellow" /> 



</LinearGradientBrush> 



〈 /Style 〉 

乍看起来在样式中定义 iHii 笔有些奇怪，似这是很锌遍的做法 。 LinearGradientBrush U 
身并未设 S x : Key 特性，而只有 Resources 集合中的顶层 Style 元素具有该特性。 

在代码中定义 Style 对以这•做。 

Style style = new Style(typeof(TextBlock)); 

style.Setters.Add(new Setter(TextBlock.FontSizeProperty, 96)); 
style.Setters.Add(new Setter(TextBlock.FontFamilyProperty, 



将这个样式添加到 Page 的 Resources 狼合 治要在 InitializeComponent 被调用前完成。 
这样， XAML 文件中定义的 TextBlock 元素才能使用它。另外，也可以将 Style 对象直接设 
W 到 TextBlock 的 Style 属性上。似这种做法并小常见，因为在代码中我们吋以通过其他方 
A 为相同的屈性赋值，例如通过 for 或 ( breach 循环。 

请注意 h 述示例代码中 Setter 构造函数的第一个参数。该参数的类增为 
Dependency Property 。 样式的目标类增或其父类会定义一些 Dependency Property 类咿的静 
态属性，我们应通过这呜静态属性來指定该参数。依赖属性可以在+创建类实例的前提下 
指定类的属性，这个示例恰 好敁水 了这样设计的好处。 





这段代码还暗氺了一点，即 Style 所针对的 M 性只能为依赖厲性。 il : 如前文提到的，依 
赖 H 性能够沿着吋视树传 播。 平例宋说，假设程序中有以 卜标 记。 

<TextBlock Text="Top Text" 

Style=" {StaticResource rainbowStyle} 



HorizontalAlignment=.’Center" 

VerticalAlignment»"Top" /> 

Style 定义 j ' FontSize ffl . fll FontSize 厲性又在 TextBlock 本 地被爪 新设 W 。 il •:如人们 
希银的，木地设裨优先忭式设并 FI 木地设 W 和样忒设腎优先 P 沿着吋视树传播的 
FontSize 值。 

-旦 Style 对象被设置到某元素的 Style 属性上,便+能被更改。此时， 我们吋 以在这 
个元素上设賢•个不同的 Style 对象,可以修改样式引用的对象(如画笔)的属性,但不能设 
筲或移除 Setter 对象，也+能修改 Value 诚性。 

样式 mJ 以通过 Style 类的 BasedOn M 性从其他样式继承厲性设芮。为此，一般使用 
StaticResource 标记扩展来引用之前定义的 Style 资源。 

<Style x : Key="baseTextBlockStyle M TargetType a "TextBlock"> 

<Setter Property="FontFamily" Value="Times New Roman" /> 



</Style> 

<Style x : Key="gradientStyle" TargetType="TextBlock" 

BasedOn = "丨 StaticResource baseTextBlockStyle)"> 



<Setter Prope r ty="Foreground"> 


<Setter.Value> 



</Style> 

名称为 gradientStyle 的 Style 坫 J - 之前定义的 baseTextBlockStyle 样式。 前 荇继承 fiT ； 
汽的 FontFamily 设 符， 改 H / FontSize 设齊并'引入 / Foreground 设 K 。 

再看一个例子。 

<Style x : Key="centeredStyle" TargetType="FrameworkElement"> 

<Setter Property="HorizontalAlignment" Value= n Center" /> 

<Setter Property="VerticalAlignirjent" Value="Center" /> 

</Style> 


<SCyle x:Key="rainbowStyle" TargetType="TextBlock" 
BasedOn=" (StaticResource centeredStyle I ••> 
<Setter Property= ,, FontSize w Value= M 96" /> 
〈Setter Property="Foreground"> 

<Setcer.Value> 


<LinearGradiencBrush> 
<GradientStop Offset: 
<GradientStop Offset: 
</LinearGradientBru5h> 
</Setter.Value> 



在这个例子中，第一个 Style 的 TargetTypelH 标类 奶为 FrameworkElement , 这说明该 



柞式只能包含 FrameworkElement 本身定义和它继承的属性。 该样式 "丨以应用到 TextBlock 
I ..， W 为 TextBlock 派屯自 FrameworkElement 。 第：个 Style . 堪 I . centeredStyle 样 A ， B 标 
类甩为 TextBlock , 也就是说它吋以包含 TextBlock 特有的属性。 TargetType 所指定的类甩 
必须 1 j BasedOn 的样式所针对的类型相同或是 BasedOn 的样式所针对的类甩的子类。 

尽管前文说资源都耍有键，但实际 I : Style 是个例外。没有 x : Key 的 Style 叫“隐式样 
式” (implicit style ). 示例项目 ImplicitStyle 的“资源区段”演示了这种样式的使用。 

项 R : ImplicitStyle | 义件 ： Main Page, xaml UV 段） 



<x:String x : Key="appName">Implicit Style App</x:String> 

〈Style TargetType="TextBlock M > 

〈Setter Property**"FontFamily" Value="Times New Roman" /> 
<Setter Property="FontSize" Value«"96" /> 

<Setter Property="Foreground"> 



<LinearGradientBrush> 

<GradientStop 0ffset="0" Color="Red" /> 

〈GradientStop Offset="0.17" Color="Orange" /> 

<GradientStop Offset-”0.33" Color= H Yellow" /> 

<GradientStop Offset= w 0.5 M Color= M Green M /> 

<GradientStop Offset="0.67 M Color="Blue" /> 

<GradientStop Offset="0.83" Color="Indigo" /> 

<GradientStop Offsets"1" Color="Violet" /> 

</LinearGradientBrush> 

〈 /Setter.Value 〉 

</Setter> 

</Style> 

</Page.Resources 〉 

事实 h，Windows RT 浩 JTi 会为这个属性创建一个键。该键是 类勒为 RuntimeType 的对 
象(非公共类〉。对于这个例子，所生成的 RuntimeType 对象用 丁指代 样式所针对的 TextBlock 
类甩。 

隐式样式非常有用。吋视树 h 任何未设置 Style 厲性的 TextBlock , 都将获得这个隐式 
样式。如果页面中已经添加了许多 TextBlock 元素，但之后决定统一其样忒，使用隐 A 样 
式®方便。请注意，在这个示例中， TextBlock 元素都没有设 S Style 厲性。 

项 R: ImplicitStyle | 义件： MainPage.xaml (片段> 

<Grid Backgrounds"(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<TextBlock Text="{StaticResource appName}" 

FontFamily="Portable User Interface" 



<TextBlock Text="Top Text' 



HorizontalAlignment="Righc" 
VerticalAlignment="Center" /> 
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这见将隐忒样式应用到了奴曲 h 的大多数 TextBlock 元素，似如果+希望应用到第一 
个元索上(显示在中央的文本块)，该怎么办？如果不希望页面上的某个元素受隐式样式影 
响，可以赋 f 其显式样式, nj •以通过本地设置覆盖 Style 对象中的属性设置，也可以将该元 
素的 Style 属性设1!为 null 。 在这个承例中，我们修改第一个 TextBlock 的 FontFamily 和 
FontSize M 性的默认值，并使用预定义的资源设 H Foreground , 这些都会覆盖隐忒样忒对 
该元素的设置。 

开发者创述的柞式小能继承隐忒样式.但隐式样忒以继承非隐式样式。为此，提供 
TargetType 和 BasedOn 特性，似不添加 x : Key 即川"。 

虽然隐式样式非常强大，但凡事必有利弊。在大型应用程序中，柞式定义随处吋见， 
而吋视树吋能 111 多个 XAML 文件共同构建。如果样式隐式地应用到某个兄尜 h . 则很 难确 
定该样式到底《 I :哪■定义的。 

现在，我们"丨以开始使用(或 阅读- -下) SlandardStyles . xaml 文件中针对 TextBlock 的样 
A 。 这鸣样 A 包柄 BasicTextStyle . BaselineTextStyle 、 HeaderTextStyle , SubheaderTextStyle 、 
TitleTextStyle 、 ItemTextStyle 、 BodyTextStyle 、 CaptionTextStyle 、 PageHeaderTextStyle 、 
PageSubheaderTextStyle 和 SnappedPageHeaderTextStyIeo 显然，这巧样 K 也是以文木的形 
式存在的。 


2.10 初探数据绑定 


使 ffl 数据绑定 (data binding ) 是另一种在 XAML 文件中共享对象的方法。简中.地讲，数 
据绑定是一种建立在两属性间的连接。数据绑定主要用丁-在贞 iftiiij ■视元素与数据源之间建 
、>:连接，并且是实现“模型-视图-视图模型” ( Model - View - ViewModel , MVVM ) 模式的主 
耍手段 (详情参见第6 章)。 MVVM 的绑定|:彳标是视图中的吋视元素，绑定源是视阁模哦 
中的属性。在定义用 Hi 氺数据对象的模板时，数据绑定是一个关键步骤(第 II 章将具体 
介绍)。 

我们 hJ 以使用数据绑定来连接两个元素的属性。 tj StaticResource 一样， Binding 也是 
以标记扩展形式表达的，•崔在大括号中间声明。但比 StaticResource 更进一步， Binding 
以通过属性元素语法来表达。 

卜面的代码來 Q 小例项 I I SharcdBrushWithBinding 的“资源区段”。 

项 R: SharedBrushWithBinding I i ： 件： MainPage.xaml< 片段 > 

<Page.Resources 〉 

<x:String x : Key="appName">Shared Brush with Binding</x:String 〉 



<Setter Property:"FontFamily" Value="Times New Roman" /> 
<Setter Property:. ， FontSize" Value= M 96" /> 

</Style> 

</Page.Resources 〉 


TextBlock 的隐式样式不再拥有 Foreground 属性。 LinearGradientBrush 被定义在第-个 
使用该画笔的 TextBlock 儿素 I :。后面的3个 TextBlock 元素通过绑定引用该画笔。 
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项 H: SharedBrushWithBinding | 文件： MainPage.xaml (>; • 段） 

<Grid Background;"{StaticResource ApplicationPageBackgrounciThemeBrushl"> 
<TextBlock Text="IStaticResource appName}" 

FontFamily="Portable User Interface" 

FontSize="48" 

HorizontalAlignment=* , Center" 

VerticalAlignment="Center" /> 



Text="Top Text" 

HorizontaiA1ignment="Center" 

VerticalAlignment="Top"> 

<TexCBlock. Foreground 
<LinearGradientBrush> 

<GradientStop Offset="0" Color="Red" /> 
<GradientStop Of£set="0.17" Color= H Orange" /> 
<GradientStop Offset="0.33" Co1or="Yellow" /> 
<GradientStop Offset="0.5" Color="Green" /> 
<GradientStop Offset="0.67" Color="Blue._ /> 
〈Gradientstop Offset="0.83" Color="Indigo" /> 
<GradientStop OffseC="l" Color="Violet" /> 


</LinearGradlentBrush> 
</TextBlock.Foreground 〉 



Horizonta 1A1 ignnvent=" Left" 

VerticalAlignment="Center'' 

Foreground:’’I Binding ElemenCName=topTextBlock, Path=Foreground)" /> 

<TextBlock Text="Right Text" 

HorizontaIAlignment="Right , ' 

VerticalAlignment®"Center" 

Foreground="{Binding ElementName=topTextBlock / Path=Foreground J" /> 


<TextBlock Text="Bottom Text" 

HorizontalAlignment="Center" 
VerticalAlignment= n Bottom"> 
<TextBlock. Foreground 

<Binding ElementName="topTextBlock" 
</TextBlock.E 
</TextBlock> 

</Grid> 


数据绑定盅要有“源”和“ II 标”。 U 标总是绑定设 K 所在的 M 性，而源则是绑定所 
引用的域性。在这个例 f 中，名 AtopTextBlock 的 TextBlock 是绑定源，而 G 面三个 TextBlock 
的 Foreground 则是绑定 LI 标。前两个 I 丨标使用的是以 XAML 标记扩展方式农达的 Binding 
对象。 


Foreground^"(Binding ElementName=copTextBlock r Path=Foreground}" 

XAML 标记扩敁必须在大括号中声明。 Binding 标扩展 耍求设 S 两个厲性值。+同 
Mfl ■:间用英文 iii 1 分隔。 ElementName 属性 P 指定源元袭(值来源丁•该元約的名称， Path 
属性 n 】 r 指定源 K 件的名称。 

麵入 Binding 标记扩展时,人们可能要习惯性地对属性值加引号。这是错误的。引 
号不应出现在绑定表达忒中= 

水例的敁 / T ? 一个 TextBlock 展水 f 以“属性元素语法”形式表达的 Binding 对象。 



〈Binding ElementName="topTextBlock" Path="Foreground" /> 
</TextBlock. Foreground 


这种 ifj 法要求在 ElementName 和 Path 属性的值 I :加引 

我们也 Kf 以在代码中创注 Binding 对象，通过 FrameworkElement 的 Set Binding //法将 
该对象设 H 到 U 标属性匕在这个过程中会发现，绑定 U 标必须是依赖 属性。 

Binding 类的 Path 诚性之所以叫做 Path , 是因力实际的值吋能是多个 ill 句点分隔的名 
称。还是以木竹的示例项 tJ 为例 ， ffl Klfii 这行标记来好换其中的某个 Text 设饨。 

Text="{Binding ElementName=topTextBlock, Path=FontFamily.Source}" 

Path 值的第一部分表示我们要从 FontFamily 属性获取内容。该属性返回的是 FontFamily 
的对象。该对象有一个 Source 厲性，返回的是字体的名称。这个 TextBlock 将砧小 1 “Times 
New Roman ” 。 （ C ++ 程序£4前还小支持这种复合的、索引形式的路 径。} 

"丁 以在 示例项 H 的任意 TextBlock I •.尝试以 F 设冴。 

Text= " 丨 Binding RelativeSource*(RelativeSource Selfl, Pat:h=FontSize) 

这是一种 Binding 标记扩展内部的标记扩展， B|J RelativeSource 标记扩展。 nj ■以用这利 i 
语法使元素能够引用自身的 M 性。 

熟悉 Static Resource、Binding 和 RelativeSource iTi < 便能够现解 Windows Runtime i 持 
的大部分标 id 扩展。第 1 丨 章会介绍另一种标 ii 1 扩展， B |) TemplateBinding 标 it ! 扩展。 

K - 余的标记扩展并+卜分常用，似有时也小可或缺。假设己为 Grid 定义好丫 .种设咒 
Background 属性的隐式样式,但希望其中一个 Grid 的 Background 属性为 null 。 那么在标 
记中如何指定 null 呢?可以像 F 面这样做。 

Background^"(x ： Null)" 

冉平一个例子， 假设已 经定义了一种隐式样式，但不希望其中的某个元尜以仟何方忒 
受该柞式影响，则可以像下 rtu 这 ff 做。 

Style="{x:Null} n 

至此，本书已经介绍了 XAML 文件中针对 Windows Runtime 可能出现的大部分带有 
“X” 前缀的数据类型、元素、特性和标记扩展。其中的数据类型包括 x : Boolean 、 x : Double . 
x : Int 32 和 xrString , 特性包括 x : Class 、 x : Name 和 x : Key . 标记扩展包括 x : Null 。 还冇一个 
指令之前未提到过，即 x ： uid . 该指令用 r •引 ra 国际化资源，伉为应用程序令 h 唯一的宇 
符串。 




第 3 章基本事件的处理 

前 Ifri 两章演小了如何在 XAML W 代码中实例化和初始化元素及其他对象 。 XAML -般 
用来定义最初 的奴面 布局和元素的外观，然 C 通过代码在运行时修改儿索的屈性。 

之前还介绍过，在 XAML 中为元#分配 Name 或 x : Name 后， Page 类中便会生成对应 
的字段。这样，代码隐藏文件便能够 M 过该字 段访问 XAML 中的几尜。务:代码 Lj XAML 
交4:方酣，这是两种主要方式之一，另一种是通过事件 ( event )。 噴件是 种 对象间的通信 
机制。事件被一个对象“引发”（或#说“触发”），被其他订阅该#件的若丁对象“处 
理”。在 Windows Runtime 中， ： U 件主要用来通知来触換、鼠标屏、手写笔或键甜的 ffl 
户输入。 

初始化完成之后 ， Windows Runtime 程序便会驻街 f •内#并等待所关注的事件。儿 T - 
所有的子程序都在車件发牛后执行，所以木15卜血介绍的内荇绝大部分邡 UIH 牛处珂相关- 

3.1 Tapped 事件 

UlElement 类定义了所有用户输入事件， " J ■分成以 K 几类。 

• 8个涵盖触換、鼠标和手写笔的输入的車件，这些車件的名称以 Pointei •为前缀。 

• 5个汇集了来&多点触換的输入的事件，这些事件的名称都以 Manipulation % 
前缀。 

• 2个响应键盘输入的車件，这两个淇件的名称以 Key 为前缀。 

• 4个 A 级事件，分别为 Tapped 、 DoubleTapped , RightTapped 和 Holding 。 
RightTapped 囀件并非 rll 右手手指触換引发，而川丁响应鼠标 t 键中.击。吋以通过手指 

点击并保持不动，然; T ； 抬手来模拟触換板的心击，注总，该操作也会引发 Holding 讲件。 
应处理哪个负件则要具体问题具体分析。 

第13章会介绍与触摸、鼠标和手写笔相关的事件。 UlElement 还定义 T 以下两组与用 
户输入有关的車件。 

• 接受键盘输入的元桌所具有的 GotFocus 和 LostFocus 事件 

• 〗；;•拖放有关的 DragEnter 、 DragOver . DragLeave 和 Drop ‘if 件 

我们先从 Tapped 这个比较冇代表性 H . 较为简中.的唞件说起。派 'MJ UlElement 的元桌 
都有 Tapped 事件,能够在用户触摸、鼠标单击、手写笔点按时引发。为引发 Tapped 事件， 
手指、鼠标或手写笔按下后不能有太大移位，并迅速抬起。 

所有用户输入事件的模戎都类似。 UlElement 定义的 Tapped 用 C # 语法 " J ■以这柞表达。 

public event TappedEventHandler Tapped; 

TappedEventHandler 定义 】• Windows . UI . Xaml . lnput 命名空间，是种冇，件处观程序 
签名的委托类吧。 

public delegate void TappedEventHandler(object sender, TappedRoutedEventArgs e); 
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这个委托签名的第一个参数指向引发事件的对象 (一般 为 UlElement 的实 例)， 第二个参 
数是 Tapped 唞件特有的。 

示例项 H TapTextBloclc 的 XAML 文件定义了一个带有 Name 特性和 Tapped 饵件处 H 
程序的 TextBlocko 


<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<TextBlock Name= M txtblk" 


Text="Tap Text! 
FontSize-"96 M 



VerticalAlignment="Center" 
Tapped=" txtbl k__Tapped_l" /> 


</Grid> 


在 XAML 中键入 TextBlock 的特性 时，“ 智能感知”功能会提示可用的 厲性和 If 件。 
两者 可以 通过名称左端的小图标加以 区别： 属性用“扳手”图标表示，事件用“闪电”图 
标表示。还有一些大括号图标，第4章会介绍。如果需要，“智能感知”功能还 mJ •以自动 
屮成車件处玴程序的名称。从 XAML 语法无法 K 分特性和事件^ 

实际的 If 件处理程序耍在代码隐藏文件中实现。除了 iiJ ■以牛.成处理程序的名称外， 
Visual Studio 还可以生成空 n 事件处理程序。下血 的空白 事件处理程序是在 
MainPage.xaml.cs 文件中生成的。 

private void txtblk_Tapped_l(object sender, TappedRoutedEventArgs e) 


该方法会在 TextBlock 被用户点击后引发。对 f •后面小例程序中的唞件处理程序，本 
人会根据个人偏好修改其名称，即移除 private 关键字(因力这是默认的)， i 掉名称中的 K 
划线，添加单词 On (如 OnTexlBlockTapped ), 并将参数 e U? 命名为 args。 在代码中屯新对 
方法名命名后.可以中.击全局軍命名小图标， XAML 文件中的方法引用能够随之变化。 

这个示例程序可以在 TextBlock 被中.击后随机生成一种颜色。为此， MainPage 类中定 
义了一个 Random 对象和一个表示红绿蓝三色的字节数组。 

项 R: TapTextBlock I 义件： MainPage.xaml.cs ( 片段） 
public sealed partial class MainPage : Page 
( 

Random rand = new Random(); 
byte[] rgb = new byte[3]; 


public MainPage 0 
[ 

this•InitializeComponent(>; 

} 

private void txtblk_Tapped_l(object sender, TappedRoutedEventArgs e) 
I 

rand.NextBytes(rgb); 


① im ： 这足 1 〖件灸托的标准形式。 M 然编 if 器允许事件使用 fr 总签名的灸托炎队 fll.m^.NET f-fr«vu. •則1:的处押 

应带心 sender fll c 这两个参数.府 ff 炎®为 object. 行足派士 EveniArgs 的炎。 

② 汗注 ：使用••中命名"对话椐(按功能键 F 2> 进行宽命名也足较常 HJ 的方式。江反 fi 编辑名称时,“屯命名” 标町能会由 
丁•反&修改而消火,而“取命名”对话框可以确保®命名搡作能够被执行(足否彻成足另一 N 亊此外，通过“®命名”对 
话 枢可以 悚览受影响的所紅义件及位览。编糾名称后 • 按 Brncr 键 X ：闭对话枢。珥以 H 始至终不使操作. WifuM 样 A 效。 


Color clr = Color.FromArgb(255, rgblOJ, rgb[1J, rgb[2J); 
txtblk.Foreground c new SolidColorBrush(clr); 


这个小例移除了默认添加的 OnNavigatedTo 方法， 闵为这 并米 ffl 到。 Tapped 寧件处 
理程序通过 Random 的 NextBytes 方法牛 .成了 3个随机的宁-诗.传入静态方法 
Color.FromArgb 便 " J " 获得 Color 值。 JS 后，这个 If 件处理程序将 TextBlock 的 Foreground 
属性设置为基丁•此 Color 值的 SolidColorBrush .. 

运行这个小例程序，并用手指、鼠标或手写笔点击屏陆中央的 TextBlock , 文字会4现 
随机的颜色。点击 TextBlock 以外的屏幕区域则没冇仟何变化。使用鼠标或手写笔也+必 
点击到字母的笔 Pil :。 点击笔 Pi 和笔幽间， If 件都能够被引发。好像这个 TextBlock ft 有 
一个不可见的背援，其卨度包含字体变音符9和 卜伸 部所占高度。堪实的确如此。 

Visual Studio 牛.成的 MainPage . g . cs 文件中会包含一个名为 Connect 的方法。该方法将 
事件处理程序4 TextBlock 的 Tapped 事件关联。我们也可以自己订阅事件。将 
MainPage . xaml 义件中的 Tapped 处理程序设 Si 掉，并在代码隐藏文件的构造函数中 I 丁阅 
囀件(如 K 所响。 

public MainPageO 

I 

chis.InitializeComponentO; 
txtblk.Tapped +- txtblk_Tapped_l; 

实际效果无差别。 

为使 TextBlock 的 Tapped 洱件 I : 作，需要设背 几个城 性。 IsHitTestVisible 和 IsTapEnabled 
属性必须为 true (默认值)。 Visibility 厲性必须为 Visibility . Visible (默认值)。如果将 Visibility 
属性设置为 Visibility - Collapsed ， 那么 TextBlock 将不可见 卜1 无法响应用户输入。 

If 件处理程序 txtblk _ Tapped _ l 的第一个参数是引发 ‘ Jf 件的允教(对照木小例来说，这 
个允索就是 TextBlock )。 第：个参数用•提供当前事件的信息，其中包括点击发生的平标 
点以及指针设备炎艰(手指、鼠标或手写笔)。第13 章会良 体介绍有关内容。 

3.2 路由事件的处理 

Tapped 讲件处现程序的第•个参数 sender 传入的是引发该负件的元桌， W 此+必力汸 
问该元素而为其设置名称。这里，我们可以将参数 sender 转换为 TextBlock 类型的对象。 
这样■以使多个元素共享同•个事件处理程序(正如在示例项 U RoutedEventsO 中所展 
示的〉。 

路山 ‘ K 件足 Windows Runtime 的屯耍 功能。木章的氺例中有-系列演示路山 ‘ jt 件的项 
目。 RoutedEventsO 项目并未特别突出路由事件,因而其名称后缀为0。该示例创 建了个 
Tapped 处理程序，其签名和名称都 ft ! 据木人偏好做 f 调牿。 

ililFI: RoutedEventsO | 义件： MainPage.xaml.cs 

public sealed partial class MainPage : Page 


Random rand = new Random(); 
byte 【】 rgb ^ new byte[3]; 




Color clr = Color.FromArgb(255, rgblO], rgb[lj, rgb[2J); 
txtblk.Foreground = new SolidColorBrush(clr); 

} 

iif 注 ,6:, 窜件处理程序的第一行将 sender 参数转换成了 TextBlock 。 

111 代码隐藏文件中 LL 包含/事件处现程序，所以在 XAML 文件中添加事件时 ， Visual 
Studio 的 “ 智能感知”功能会提示该处理程序的名称。因此，为示例中的9个 TextBlock 
元素添加事件轻而易举。 

项 FI: RoutedEventsO | 文件： Main Page .xaml < 片段} 



<Grid Background 3 "{StaticResource ApplicationPageBackgroundThemeBrush)"> 
<TextBlock Text="Left / Top" 

HorizontalAiignment="Left" 

VerticalAlignment="Top" 

Tapped="OnTextBlockTapped" /> 


〈TextBlock Text="Right / Bottom” 



</Page> 


为解粁这段标记，这 1 R 没必耍罗列所有元素。由于在 Page 元素 I •.设 S 了 FontSize , 所 
以伞部 TextBlock 元素都将继承该属性。运行程序，并点击仟怠允素。我们会发现毎个元 
袭的颜色能够独、>:变化(如下图所示)。 

Center / Top 


Left / Bottom 




中击 空內区域则不会产生任何 效果。 

在 XAML 文件中为9个元索设背事件处理程序或许让人觉得枯燥乏味。 F 面这个示例 
程序恰好解决了这个问题。 RoutedEventsl 程序利用了 ‘‘路巾输入处理” （routed input 
handling ), 输入車件(如 Tapped ) 被引发后会沿着可视树向上传播。这个示例并没有申独为 
毎个 TextBlock 元素设置 Tapped 处理程序，而是在某元素的父元素(如 Grid )』 •.设置 。卜面 
这段代码来自 RoutedEventsl 的 XAML 文件。 

项 R: RoutedEventsl I 文件 ： MainPage .xaml ( 片段） 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush}" 

Tapped:"OnGridTapped"> 

<TextBlock Text="Left / Top" 

Horizonta1A1 ignmen t="Left" 


〈TextBlock Text= M Right / Bottom" 

HorizontalAlignment="Right" 
VerticalAlignment="Bottom M 


除 r 将每个 TextBlock 的 Tapped 处现程序设 S 转移到 Grid I ., 处理程序的名称也被相 
应地修改。 

事件 处现程 序的内容也要做相应修改。 I •.一个示例的 Tapped 处理程序将 sender 参数转 
换成/ TextBlock 。 之所以町以这样进行类甩转换，是因为该处 PR 程序只作用于 TextBlock 
类型的元素。如果将该处理程序设置到 Grid 上，那么它的参数 sender 的类型便是 Grid 。 那 
么 M 题來了，如何区分哪个 TextBlock 被点击了呢？ 

这并不 W 难 ， Tapped Routed EventArgs 类( II 件处现程序第：个参数的炎:喂)有一个名为 
OriginalSource 的厲性，用于获取当前事件的来源。对于这个示例， OriginalSource 属性对 
能返回 TextBlock (文本被点击).也吋能返回 Grid (空白区域被点击)，因而要伤转换前做类 
型检査。 

项 R: RoutedEventsl | 文件： MainPage.xaml.cs (片段 > 

void OnGridTapped(object sender, TappedRoutedEventArgs args) 

( 

if (args.OriginalSource is TextBlock) 

( 

TextBlock txtblk = args.OriginalSource as TextBlock; 
rand.NextBytes(rgb); 

Color clr = Color.FromArgb(255, rgb[0], rgb11J, rgb[2]); 
txtblk.Foreground = new SolidColorBrush(clr); 


若先做类型转换 "， 再判断结果是否为非空，依此来确记事件源，效率会略微高一些。 

TappedRoutedEventArgs 派牛•自 RoutedEvenlArgs 类。 •者只定义一个名为 
OriginalSource 的属性。 M 然， OriginalSource 属性是处理路由事件的重要 : K 具。该属性允 
许吋视 树中的元素处理来自子孙的事件，并且可以得知件的来源。路由事件使父元素能 
够了解子元索的情况。我们可以通过 OriginalSource 来识别引发堺件的子元索。 


① 评注:在 C # 中坩关键字 as 进行类 M 转换 (£ 如示例代码所做 的)。 

② if it ： 这里所说的 RoutcdEvcmArgs 來 |’| Windows.UI.Xaml 命名•令 fuh System. Windows «ll fuj Ik /l 个 M 名炎 •• 
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另外，这个示例的 Tapped 处理程序也 uj ■以从 Grid 转移到 MainPage h 。 通过 MainPage . 
我们 hJ •以采用一种特殊方式处理 Wh 之前提到过 , UIEIement 类定义 f 所有用户 输入事 件。 
这咚事件被所有派生类继承，但 Control 类添加了自己的事件接口，包括一组与这些输入事 
件对应的吋视方法 (visual method )。 例如，对丁 - UlElement 定义的 Tapped f 件， Control 类 
定义了名为 OnTapped 的 " J •视方法。这些岈视方法的名称都以 On 为前缀，后面跟車件名， 
因此这些方法也被称为 “ On 方法”。 Page 类间接通过 Control 类派牛自 UserControl , 所以 
Page 和 MainPage 部继承了这些 方法。 

下曲这段代码来自示例项 tl RoutedEvents 2 的 XAML 文件。该文件未引用任何車件处 
理程序。 

项 R: Routed£vents2 | 文件 ： MainPage • xaml < 片段） 

<Page 

x:Class="RoutedEvents2.MainPage" 

xm 丄 ns="http: "schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.raicrosoft.com/winfx/2006/xaml" 
xmlns:local="using:RoutedEvents2" 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

xmlns:mc="http : //schemas.openxmlformats.org/markup-compatibility/2006'* 

me:Ignorable="d" 

FontSize*"48"> 

<Grid Background^"(StaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock Text="Left / Top" 

HorizontalAlignment="Left" 

VerticalAlignment^Top" /> 


<TextBlock Text» w Right / Bottom" 

HorizontalAlignment="RighC M 
VerticalAIignment="Bottom" /> 

</Grid> 

</Page> 

对应的代码隐藏文件 E 写了 OnTapped 方法。 

项 H: RoutedEvents2 | 文件 ： MainPage • xaml .cs ( 片 段） 
protected override void OnTapped(TappedRouCedEventArgs args) 


if (args.OriginalSource is TextBlock) 



Color clr a Color.FromArgb(255, rgb[01, rgb[1], rgb[2J); 
txtblk.Foreground = new SolidColorBrush(clr); 

) 

base.OnTapped(args); 

} 

在 Visual Studio 中，如果要重写 OnTapped 这样的吋视方法， 只耑 耍键入关键字 override 
并按空格 ， Visual Studio 会! nU ; 父类定 义的所有4视方法。选抒所耍歌写的方法后 ， Visual 
Studio 会创建一个方法存根，该存根只调用搞类被歌写的方法。虽然取写堪类方法并小一 
定嬰调 用基类 的对应方法，但包含这样的代码是一种良好的习惯。是在敁初、最后、中间 
菜处调用，还是根木不调用，取决丁•被重写的方法的设计。 

On 方法祜木七~事件处理程序是等价的。前者没有 sender 参数，因为它是多余的， 
sender '-j this 都衍向处刊!该 II 件的 Page 实例。__ 


① 'fit ： 前提 a 被处 ffl 的事件和对应的可视 ; tr 法均 w r-ra - 个炎 • 并 a 在该 * 成其派生类中处 pi 它们 , 



示例项 U RoutedEvents 3 会在元泰被点击时为 Grid 随机分配-•种颜色。 XAML 文件 M 
前一个示例一样，但 OnTapped 方法有了些改变。 

项 R: RoutedEvents3 I 文件： MainPage.xaml .cs < 片段） 

protected override void OnTapped(TappedRoutedEventArgs args) 

{ 

rand.NextBytes(rgb); 

Color clr = Color.FromArgb(255, rgb[0 】， rgb[ll, rgb[2]); 

SolidColorBrush brush = new SolidColorBrush(clr); 

if (args.OriginalSource is TextBlock) 

(args.OriginalSource as TextBlock).Foreground = brush; 

else if (args.OriginalSource is Grid) 

(args.OriginalSource as Grid).Background = brush; 

base.OnTapped(args); 

) 

运行程序。中-击 TextBlock 元索，它自身的颜色会改变。中-击空内区域， Grid 的颜色 
会改变。 

假设出丁_菜种原 W , 我们耑要像 S 初那样敁式地为每个 TextBlock 元索定义1[件处观 
程序來改变文本的颜色，同时保留更改背景颜色的 OnTapped 方法電写。水例项丨丨 
RoutedEvents 4 的 XAML 文件恢复 TextBlock 元索对 Tapped 寧件处理程序的引用，并为 Grid 
分配了一个名称。 

项 H: RoutedEvents4 | 文件： MainPage.xaml ( 片段） 

<Grid Name=’’contentGrid" 


<TextBlock Text- M Left / Top" 

HorizontalAlignment="Left" 
VerticalAlignmenc="Top" 
Tapped="OnTextBlockTapped" /> 


<TextBlock Text="Right / Bottom" 

HorizontalAlignment="Right M 
VerticalAlignment="Bottom" 

Tapped-'^nTextBlockTapped" /> 

</Grid> 

设 S TextBlock 和 Grid 颜色的代码得到了分离，因而不必使用 if - else 块 。 TextBlock 
元素的 Tapped 处理程序 nf 毫无颐虑地转换 sender 的类喂，而 OnTapped 方法$:写⑷通过名 
称来访问 Grid 。 

项 RoutedEvents4 | 文件 ： Main Page, xaml.cs (iVS) 
public sealed partial class MainPage : Page 
( 

Random rand = new Random(); 
byte[] rgb » new byte[3 】； 

public MainPage() 

this.InitializeComponent(); 


void OnTextBlockTapped(object sender, TappedRoutedEventArgs args) 


TextBlock txtblk = sender as TextBlock; 
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txtblk.Foreground - GetRandomBrush() ; 

protected override void OnTapped(TappedRoutedEventArgs args) 
{ 

contentGrid.Background = GetRandomBrush(); 
base.OnTapped(args); 



Color clr »= Color.FromArgb (255, rgb[0], rgb[ 1J, rgb[2]); 
return new SolidColorBrush(clr); 

» 

} 

然而，这柞的代码吋能也+是我们所期 M 的。点击 TextBlock 时，随着 If 件沿•视树 
向上路巾， OnTapped 方法重写也会对其进行处理，因而不仅 TextBlock 会变色， Grid 也会 
变色！荇这不是你所期望的行为，4以利用 TappedRoutedEventArgs 对象的属性来防 lh 这 
种情况的发生。如果 OnTextBlockTapped 处理程序将该对象的 Handled 厲性设为 true , 事件 
则不会继续被 uj ■视树的上层元素处理。 

4例项 U RoutedEvents 5 演 i f 这种做法。 除了 ’ Jf 件处理方法 OnTextBlockTapped 夕卜， 

其余与示例项目 RoutedEvents 4 相同。 

项 R: RoutedEvents5 | 文件 ： MainPage .xaml .cs 《片段 > 

void OnTextBlockTapped(object sender, TappedRoutedEventArgs args) 

TextBlock txtblk * sender as TextBlock; 
txtblk.Foreground = GetRandomBrush(); 



3.3 重写 Handled 设置 


IT. 如 t: 一节所介绍的，如果处理元桌的事件(如 Tapped ) 并将事件参数的 Handled 属性 
设背为 true , 则吋以中断車件路巾。由于事件对可视树 I :层的元柰不 吋见， 因此它+会被 
继续处现。 

在某些怙况下，这不是人们期項的。例如，虽然在事件处理程序中将 Handled 设置为 
true , 但还希? Tft 件对吋视树中的 h 层元索•见。一种方案是修改代码，但可能无法实现。 
例如，元素在动态链接库中定义，并且没有源代码。 

水例项 Id RoutedEvents 6 中的 XAML 与 RoutedEvents 5 是--样的。所有 TextBlock 都设 
n r Tapped ‘1#件的处理程序。 Tapped 处理程序将 Handled 属性设霄为 true 。 代码隐藏类还 
定义了一个名为 OnPageTapped 的处理程序，设置了 Grid 的背景颜色。 

项 FI: RoutedEvents6 | 文件： MainPage.xaml.cs ( 片段） 
public sealed partial class MainPage : Page 
( 

Random rand = new Random(); 
byte[] rgb = new byte[3]; 


public MainPage() 
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void OnTextBlockTapped(object sender, TappedRoutedEventArgs args) 
( 

TextBlock txtblk = sender as TextBlock; 
txtblk.Foreground = GetRandomBrush(); 
args.Handled = true; 



rand.NextBytes(rgb); 

Color clr = Color.FromArgb(255, rgb 【0 J, rgb[1], rgb[2J); 
return new SolidColorBrush(clr); 


请注意，构造函数用了一种特殊的方法订阅 Page 的 Tapped 负件。 我们一 般用卜面这 
种方式来附加事件的处理 程序： 

this.Tapped += OnPageTapped; 

倘若这样， OnPageTapped 处 理裎序 +会在 TextBlock 收到 Tapped ‘ Jt 件时被调用，因为 
TextBlock 的处现 程序将 Handled 设賈成/ true 。 这个•例使用一个名为 AddHandler 的方法 
来附加处理程序。 

this.AddHandler(UIElemenC.TappedEvent, 

new TappedEventHandler(OnPageTapped ), 
true); 

AddHandler 方法是 UIEIement 类定义的。 U 1 Element 类还定义了静态厲性 
UIElement . TappedEvent , 此属性是 Routed Event 类喂的。 

FontSize 属性伴随有一个类型为 Dependency Property 、 名称为 FontSizeProperty 的属 
性。与之类似， Tapped 路由事件也有一个对应的静态属性 TappedEvent , 其类型为 
RoutedEvent 。 RoutedEvent 木身未定义公共成员，它的存在只是为了在不创建元素实例的 
前提下订阅事件。 

AddHandler 方法能够将处理程序附加到事件 h 。 该方法第•.个参数的类嘲为 object , 
需要创建引用事件处理程序的委托对象。最关键的是最后一个 参数： 如果它为 true , 堺件 
处现程序将依然能够收到 Handled true 的路由事件。 

AddHandlei •方法虽+常用，但我们应该了解它的存在，以备+时之需。 

3.4 输入、对齐与背景 

RoutedEvents 系列示例项 U 还有 M 后一个，展承了儿个4输入事件有关的屯要概念。 

小••例项 S RoutedEvents 7 的 XAML 文件只有一个 TextBlock , 且未定义琪件处?1!程序。 
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项 H: RoutedEvents7 | 义件： MainPage.xamI ( 片段） 

<Page ... 

FontSize-"48"> 

<Grid Background*"{StaticResource ApplicationPageBackgroundThenveBrush\"> 

<TextBlock Text»"Hello, Windows 8!" 

Foreground:•’Red" /> 

</Grid> 

</Page> 

由于没有设置 HorizontalAlignment 和 V ertical Alignment * 所以 TextBlock 会出现在 
Grid 的左上角。 

勻示例项 〖I RoutedEvents 3 一样， RoutedEvents 7 中源自 TextBlock 和 Grid 的事件也是 
在代码隐藏文件中被分别处理的。 

Hi 11: RoutedEvents7 | 文件： MainPage.xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 
{ 

Random rand ‘ new Random(); 
byte[] rgb = new byte 【 3 】； 


public MainPage() 

i 

this.InitializeComponent(); 


protected override void OnTapped(TappedRoutedEventArgs args) 
( 

rand.NextBytes(rgb); 

Color clr = Color.FromArgb(255, rgb[0], rgb[1], rgb[21); 
SolidColorBrush brush'= hew SolidColorBrush(clr); 

if (args.OriginalSource is TextBlock) 

(args.OriginalSource as TextBlock).Foreground = brush; 

el3e if (args.OriginalSource is Grid) 

(args.OriginalSource as Grid).Background = brush; 

base.OnTapped(args); 


该程序的运行效果如 卜阁所氺。 


Hello , Windows 8! 




点击文本后，它会像之前一样随机变换一种颜色，但点击文木以外的区域，它也会变 
色，而 Grid 不变色。这看起来就像 TextBlock 占据了整个页面而捕获了所有 Tapped 事件 

-样。 

弟实的 确如此 -TextBlock 的 HorizontalAlignment 和 VerticalAlignment IF 4 性具有默认值。 
通过这个示例.育觉告诉我们它们的默认值分别为 Left 和 Top , 但实际1:均为 Stretch 。 这 
意味着 TextBlock 会拉伸到与父元素 ( Grid ) •样 大小。 这很难察觉，因为字体大小为48像 
素，没有一同被 拉伸。 另外，虽然充满整个豇血，但 TextBlock 的背景是透明的。 

Windows Runtime 中所有元素的 HorizontalAlignment 和 VerticalAlignment 属性默认值 
均为 Stretch 。 这是在使用 Windows Runtime 布局系统时需要特别注总的地方。第4草会具 
体介绍有关内容。 

K ® 我们修改一下 HorizontalAlignment 和 VerticalAlignment 属性的值。 

<Grid Background 13 "{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock Text="Hello, Windows 8!" 

HorizontalAlignment="Left" 



如下所示，样一来， TextBlock 只占据员血左上角的一片小区域，并 H . 中-击 TextBlock 
之外的空白区域， Grid 会相应地变色。 

将 HorizontalAlignment 属性_好换为 TextAlignment 。 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

〈TextBlock Text="Hello, Windows 8!" 

TextAlignment="Left H 
Ve r t i ca 1A1 ignme n t=•• Top •• 

Foreground="Red" /> 

</Grid> 

程序外观+会发生变化。文本依然位 T -豇面 的 / r : l _. 角，但中.击 TextBlock 厶侧的空 
区域， TextBlock 会变色，而 Grid 小变色。巾于具有一个默认值为 Stretch 的 
HorizontalAlignment 属性， W 而 TextBlock 占据 f 屏沾 的整个宽度。在 TextBlock 所山 •扼的 
这个宽度内，文本是左对齐的。 

这个试验告诉我们，虽然 HorizontalAlignment 和 TextAlignment 的视觉效果一样，似 
还是有区别的。 

Ktfrf 我们做另外一个试验， G 卩恢复 HorizontalAlignment 的设贸.移除 Grid 的 Background 

属性。 



<TextBlock Texf'Hello, Windows 8!" 

HorizontalAlignment«"Left" 
VerticalAlignment:"Top" 



在浅色主题 F , Grid 之前具有一个色背景 。 Background M 性被移除豇血的背景 
变成了黑色。除了外观，程序的行为也发生了变化,可以看出, TextBlock 依然能够在被点 
击 iff 变色，0:1点击 TextBlock 以外的区域 ， Grid +会变色。 

Background 属性是由 Panel 类 ( Grid 继承于该类)定义的，默认值力 mill 。 如果背景为 
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null . Grid 则+会捕获点击事件，而是将其忽略。 

为保持透明效果，但又不使其忽略点击事件，一种办法是修改吋视外观， M 式地将 Grid 
的 Background 属性设 S 为 Transparent 0 

<Grid Backgrounci=.’Transparent •’> 

<TextBlock Text="Hello, Windows 8!" 

HorizontalAlignment="Left" 

VerticalAlignment="Top" 

Foreground="Red" /> 

</Grid> 

虽然最初的效果并未发生变化,但 Tapped 贺件 发生时 OriginalSource 己经能够返回 Grid 
对象了。 

这几个试验印证了 一点，即表象往往是有欺骗性的。 HorizontalAlignment 和 
VerticalAlignment 为默认值的元素 Q 使用 Left 和 T 叩值的元素，从表面上看并无差别，但 
前荇会填充整个容器并遮档 _ FM 的元 Background 属性值为 null 或 Transparent , Panel 
外观也无差别，但前者会导致触投事件被忽略。 

这两个问题很有可能出现在未来的开发中，所导致的错误不易被发现。即便有多年 
XAML 布局系统使用经验，遇到这样的错误仍然会让你晕头转向。 

当然.这只是本人的经验之谈。 

3.5 大小与方向的变化 

很多年前，当 Windows 还是¥.期版木时，有关该系统的编程资料非常难找。直到1986 
年 12 / ] 第•篇有关 W i ndows 编程的文章在 Microsoft Systems Journal ^ MSDN A / agaz/we 的前 
身） 卜.发表，情况才开始有所改观。该文章介绍了 -个叫 WHATSIZE 的程序(确实都是大写 
字母)。该程序的功能非常简单，只显示程序窗口的大小，能够在窗口大小变化时史新 M 示 
的值。 

敁然，那时的 WHATSIZE 程序还是用 Windows API 编写的，它在遇到 WM_PAINT 
消息时重绘界曲。对于当时的 Windows API , 程序窗 U 的任何内容变为无效，该消息都会 
被引发，要求程序进行*绘。程序可以定义自己的窗口，只要大小发生变化，窗口视图则 
变为无效。 

Windows Runtime 没有 WM_PAINT 消息这样的机制，整个图形编程方法己发生了翻天 
覆地的变化。 V . 期的 Windows 采用“直接模式” （direct mode ) 图形系统。应用程序可以寅 
接修改显存。当然，这是通过一个软件 M(Graphics Device Interface ) 和设备驱动程序完成的， 
但有一些绘图函数确实是直接修改敁存。 

如今的 Windows Runtime 已大为+同。公共编程接口中并没有绘制的概念。 Windows 8 
应用程序需要创建元素(派生自 FrameworkElement 的类)，并将其添加到应用程序的 uj •视树 
中。这些元素负 责呈现 自身。例如，如果 Windows 8应用程序要敁示文木，它并不“绘制” 
文木，而是创 ilTextBlock 对象： 如果要示位图，则创建 Image 元素：如果要绘制线段、 
贝塞尔曲线或拥圆，贝 1 J 创建 Polyline 或 Path 元素。 

Windows Runtime 采用的是 --- 种“保留模式” （retained mode ) 图形系统。应用程序与砧 
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示设备之间有一个复合层次。在这一层上，所有生成的输出会在 呈现给 用户前被组合。这 
种保留模式 M 显茗的优势或许在丁-其能够避免闪烁，这一点可以在卜面的示例中加以体会。 

51然 Windows Runtime 1之前版本 Windows 所采用的图形系统不同，但 Windows 8应 
用程序4传统应用程序也有一定的相通之处。一旦程序加载到内存并开始运行，就会驻留 
于内存等待某些通知。通知 "j+ 能是 事件. 也可能是回调。大部分用丁-通知用户输入 • 但也 
有一鸣表尔其他活动的发生。 OnNavigatedTo 方法是回调方式的典嘲应用。对于中页面程 
序，构造函数返回后，该方法会立即被调用。 

为实现 WHATS1ZE 程序的功能, Windows 8应用程序 uj ■能要用到一个名为 SizeChanged 
的:节 件。 示例程序 WhatSize(Windows 8版本)的 XAML 文件如 K 所水。请注总，订阅 
SizeChanged If 件处 Sfi 程序的是根冗#。 

项目 ： WhatSize I 义件： MainPage.xaml ( 厂 | 段 > 



<Grid Background= M {StaticResource ApplicationPageBackgroundThemeBrush)"> 
<TextBlock Hori2ontalAlignment="Center" 

VerticalAlignn\ent='*Top H > 

S#x21A4; <Run x : Name="widthText" /> pixels &#x21A6; 

</TextBlock> 


<TextBlock HorizontalAlignment="Center" 



<LineBreak /> 

<Run x:Name="heightText" /> pixels 



</Page> 

这段 XAML 标记定义了两个 TextBlock 元素，两个 Run 对象周围各有两个箭头。（稍 
后会肢水显水 效果。 ） 将第：个 TextBlock 的飞个属性均设霄为 Center 似乎有些极端，似这 
样做是必要的。前两个值为 Center 的属件能够将 TextBlock 置丁•贞面中央，而将 
TextAlignment 设置为 Center 可使箭头相对文本处 F 中间位置。两个 Run 元素都具有 
xrName 特性，这样便可以在 SizeChanged 倒牛处理程序中设賈该元素的 Text 属性。 

项 WhatSize | 文件： MainPage.xaml.cs (片段 > 
public sealed partial class MainPage : Page 
{ 

public MainPage() 



void OnPageSizeChanged(object sender, SizeChangedEventArgs args) 
I 

widthText.Text = args.NewSize.Width.ToString(); 
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亊件的参数恰好提供了我们耑要的贞面尺十值，其类型为 Size 结构。我们只耑要将 
Width 和 Height 属性转换为字符串并分别将该字符串设 S 到两个 Run 允索的 Text 屈性上 
即可(见下图)。 

I “1366 pixels ^ 


768 pixels 


如果在能够响应方向变化的设谷 h 运行此程序，可以旋转屏幕并观察数值变化。也吋 
以通过滑动手势将该程序切换到辅屏视图，调粮此程序和另一个程序之间分隔的位 W , 然 
后观察数值变化。 

SizeChanged 事件处理程序不必在 XAML 中订阅，在 Page 的构造函数中也 wj ■以订阅。 

this.SizeChanged += OnPageSizeChanged; 

SizeChanged 是 FrameworkElement 类定义的，由所有？■-类继承。尽管 
SizeChanged Event Args 派生自 RoutedEventArgs , 但该事件并非路巾事件。之所以这么说有 
: -个原因：①该事件参数的 OriginalSource 属性总是为 null ： ②+存在 SizeChangedEvent 
厲性，③子元袭会在该車件中提 供白身 宽度。我们可以订阅任何元素的 SizeChanged fl 件。 
一般來讲，该事件的引发顺序是沿着可视树 A h 而下。以这个示例来说， MainPage 优先接 
到该事件，然 iH 才依次是 Grid 和 TextBlocko 

如 果要在 SizeChanged 事件上下文之外获得元素的实际尺、, uj •以使用 
FrameworkElement 定义的 ActualWidth 和 Actual Height 域性。亊实 h ， i-j 使用 SizeChanged 
处理程序提供的尺寸相比，使用这两个属性更简便。 

void OnPageSizeChanged(object sender, SizeChangedEventArgs args) 

( 

widthText.Text = this.ActualWidth.ToString(); 
heightText.Text = this.ActualHeight.ToString(); 

» 

我们坷能不希望使用 Width 和 Height 属性。虽然这两个属性也是 FrameworkElement 
定义的，但两荇的默认值均为 NaN(Not a Number )"。 程序町以显式地为 Width 和 Height 赋 
值(正如第2章的示例项 P TextFormatting 所做的)， 似通常 应保持这两个属性的默认值。它 
们并小适合用来确定元桌•的实际尺、 j 。 FrameworkElement 还定义为 NaN 的 


①汗 注： NaN 足 drnibk •结构的个特 殊值， "T 以通过常说7段 double.NaN 认収这个值。打刈 double 执 h* 了未定义的拗作(例 
(HI x/O.Od). 则会产士:这个值。 




MinWidth、Max Width , MinHeight 和 MaxHeight 属性，但这择属性在实际应用当中并小 
常用。 

如果在贞面的构造函数中访问 ActualWidth 和 Actual Height 属性，它们均会返回0。 
InitializeComponent 刚被调用后，里 然己经 构建了叫视 树. 但此时 的吋视 树尚未经过布局处 
理。在构造函数执行完毕后，以卜页面事件会被依次引发。 

• OnNavigatedTo 

• SizeChanged 

• LayoutUpdated 

• Loaded 

在这些事件被引发后，如果页曲的大小变化，则会引发 SizeChanged 游件和 
LayoutUpdated 事件。如果元素被添加到视树、从中被移除，或者某元素的变化导致布局 
的改变 ， LayoutUpdated __' JM 牛也会被引发。 

在布局初始化之后，所有可视树中元素尺 、 j + 为非零。如果需要此时执行某呰初始化操 
作，则可以使用 Loaded 事件。我们 hJ •能经常需要订阅 Page 派牛类的 Loaded 氓件 。 Loaded 
事件一般只会在 Page 对象生命周期中执行一次。之所以说“一般”是因为，如果 Page 对 
象脱离父元素 ( Frame ), 并重新被附加， Loaded 售件也会被引发。这种情况一般+会发生， 
除非开发者有意为之。此外，如果页面从吋视树脱离，系统会通过 Unloaded 事件进行通知。 

所有 FrameworkElement 的派生类都有 Loaded 事件。在视树的构建过程中， mJ •视树 
子元素会先于父元岽引发 Loaded 事件， ig 终 Page 的派生类。当 Page 对象的 Loaded 
货件 被引发时， 则吋 以认为所有子对象的 Loaded 事件均被引发，并目.所有尺十己调幣究 成。 

在 Page 类中处理 Loaded 車件 十分呰遍，有的开发者甚全:在构造函数中 通过匿 名处理 
程序來执行 Loaded 操作。 


public MainPage() 



IntemationalHello World 程序在横屏模式下! uU ) 正确，但在竖屏模 A K 义 • 木可能会 11 i 现抒。 
示例项 IJ IntemationalHeUoWorld 的代码隐藏文件会在贤屏模式卜‘将 Klfti 的 FontSize 诚性修 
改为24，从而解决了这个问题。 


项 H: ScalablelnternationalHelloWorld 丨义 ’ 件： MainPage.xaml.cs ( 人 V©} 
public sealed partial class MainPage : Page 
( 

public MainPage() 

( 

this.InitializeComponent(); 
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bool isLandscape = 

DisplayProperties.CurrentOrientation ^ DisplayOrientations.Landscape I| 
DisplayProperties.CurrentOrientation = DisplayOrientations.LandscapeFlipped; 

this.Fontsize = isLandscape ? 40 : 24 ; 

J 

DisplayProperties 类和 DisplayOrientations 枚举定义于 Windows . Graphics.Display 命名空 
间。 DisplayProperlies . OrientationChanged 是静态事件。如果该事件被引发，以通过静态 
属性 DisplayProperties.CurrentOrientation 来获取当前的屏幕方向。 

使用 Windows . UI.ViewManagement 命名空间卜 AppicationView 类的 V iewStateChanged 
•] f 件，我们 ⑷以获 得包括当前是否处于辅屏视图在内的更多信息。第12章会详细介绍有关 
内容。 


3.6 尝试绑定到 Run 元素 


第2章介绍/数据绑定。数椐绑定吋以连接 两个厲件。 如果源属性发生变化， H 标属 
性也会随之变化。这种机制可以减少对寧件的依赖。 

吋否重写 小例项 U WhatSize , 使用数据绑定来替代 SizeChanged 处理程序？这值得 

一试。 

在 WhatSize 项 U 中，从 MainPage . xaml.cs 文件中移除 OnPageSizeChanged 处现程序(如 
果+想过多地修改此文件，吋以将其注释 掉）。 移除 MainPage.xaml 文件根标签的 
SizeChanged 特性，并将 MainPage 命名为 page 。 办:两个 Run 对象 I :通过 Binding 标记扩展 
来 U 用页面的 ActualWidth 和 ActualHeight M 性。 

<Page … 

Name=*"page" 

Fontsize= M 36" > 


<Grid Background*"(StaticResource ApplicationPageBackgroundTheraeBrushl 
<TextBlock Horizonta1A1ignment="Center" 



&#x21A4; 

<Run Text="{Binding ElementName=page, Path=ActualWidth) "/ > 
pixels &#x21A6; 

</TextBlock> 


<TextBlock HorizontalAlignment="Center" 
VerticalAlignment='*Center M 
TextAlignment= H Center'*> 



<LineBreak /> 

<Run Text="(Binding ElementName=page, Path-ActualHeight) "/ > pixels 
<LineBreak /> 



</ Page > 
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这个程序能够编译通过，并&不会出现运行时异常。只不过它有一个 问题： 两个数字 
均为0。 

这不免让人困惑，尤其是我们将相同的绑定设置从 Run 转移到 TextBlock 的 Text 属性 
上时。 

<Page ... 

Name="page" 

FontSize="36"> 



VerticalAlignment-"Top" 

Text="(Binding ElementName=page, Path=ActualWidth)" /> 


<TextBlock HorizontalAlignment»"Center" 

VerticalAlignment*"Center'' 

Tex tAi ignmen t ■ ** Cen ter " 

TexC='M Binding ElementName=page / Path=ActualHeight J" /> 



</Page> 

效果如 K 图 所示。 



这段标记运行后， •©初 的状态是 iT: 确的。对 P 本15截稿前的 Windows 8版木，改变屏 
幕方 向或豇 Ifli 大小，这两个数字均不会被更新，但它们应该被吏新。‘从理论I:讲，数据绑 
定只有在源域性发生改变时才会通知 W 标属性， W 而程序的源代码中不必使用事件处理程 
序或任何史新机制，这正是数据绑定的优势所在。 

为何数椐绑定只对 TextBlock 的 Text 厲性有效，而对 Run 的 Text 属性+起作用呢？ 

这是 W 为数据绑定的 H 标必须是依赖属性。在代码中通过 SetBinding 方法来定义数据 
绑定时便会发现这一点。两个元索的 Text M 性 +同： TextBlock 的 Text 厲性伴随有相应的 
TextProperty 依赖属性，而 Run 的 Text 属性没有。 XAML 解析器应禁止在 Run 的 Text 属 
性I:设 S 绑定，但它并没有这么做。 

在这个试验中，放弃绑定到 Run 元素转而绑定 TextBlock, 致使文木周围的箭头被舍 


① if it .： M 然数能够 rt : 源 W 性变化时进圩 ifl 知. fUffi 求对象土动发起界 ifliWi ' X 的 ©求 ft 1_线执打>。瓜然 
At-lualWidth 和 ActualHcighl W 性的 卞变化. 们没 WiJHi ' ifltn . 义笼统地解枰进： ••它 们足在运行时以 W 屮//式 il.P 
到的。 "不 在实 中. WWW 不耍鄉定这网个 W 件.除 II ■这.限制江未米坷以解决。 




弃。第 4 章将介绍如何通过 StackPanel 使箭头回归。第16章会介绍如何通过 
RichTextBlock 来实现这种界面。 


3.7 计时器与动画 

Windows 8应用程序有时需要以某个固定时间间隔接收事件。例如，时钟程序吋能需 
要每秒钟吏新一次界面。为此， S 好使用 DispatcherTimer 类，设置其时间间隔并订阅它的 
Tick 事件 • 

时钟示例程序的 XAML 文件非常简中.，只是显示一个字体较大的 TextBlock (如卜所小>。 

项 R: DigitalClock I 义件： MainPage.xaml ( 片段） 

<Grid Background^"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock Name="txtblk M 

FontFamily="Lucida Console" 

FontSize="120" 

HorizontalAlignment- , 'Center" 

VerticalAlignment*"Center" /> 

</Grid> 

代码隐藏文件创建了一个间隔为 1 秒的 DispatcherTimer , 并在 Tick 事件处理程序中设 
n r TextBlock 的 Text 属性。 


项 H: DigitalClock | 文件 ： Mai 
public sealed partial class 
1 

public MainPage() 


nl.cs 《片段） 
: Page 


this.InitializeComponent(); 

DispatcherTimer timer = new DispatcherTimer(); 
timer.Interval = TimeSpan.FromSeconds(1); 
timer.Tick += OnTimerTick; 
timer.Start{); 


OnTimerTick(object 


object 


该尔例程序的运行效果如下图所示。 


8 : 47:03 PM 



调用 Tick 車件处理程序的线程 M 用户界 ifii 的执行线程是同一个。如果该线程比较繁 
忙， Tick 处理程序就不会被调用并中断该线程的工作。在这种情况下， Tick 事件町能会变 
得+规则，甚至可能跳过几个周期。在多页面应用程序中，最好在 OnNavigatedTo 方法歌 
写中启动计时器，并在 OnNavigatedFrom 中终±它，以防它在页面不可见的怙况 K 做“无 
用功”。 

从这个 示例吋 以看出 Windows 桌曲'应用程序与 Windows 8应用程序在敁示方面的差 
异。这两种应用程序都 nf 以通过 汁时 器来实现时钟应用，但 Windows 8时钟应用并非通过 
定期使窗口内容失效的方法来绘制 或電绘 界面，而仅仅是修改现有元素的属性来改变其视 
觉外观。 

DispatcherTimer 的间隔时间町以设置得再短一些，但最好不要使 Tick 处理程序的调用 
过丁-频繁，甚至超过显示器的刷新频率(大概为60 Hz , 或者说间隔不要低于17毫秒)。当 
然，史新羿 1(11 的频率高于 W . 示器的刷新频率也没有意义。以适当的频率进行史新可以使动 
ffli 更为平滑。如果要实现动画，则不应使用 DispatcherTimer . 而应使用静态事件 
CompositionTarget . Rendering 。 该亊件刚好会在界面被刷新前调用。 

除了 CompositionTarget.Rendering 事件 ， Windows Runtime 还提供了很多勺动 iHij 有关的 
类型。这些类型允许我们在 XAML 或代码中定义 动®。 它们提供了很多选项，并 PI 其中的 
一些是在后台线程上执行的。 

在第9章专门介绍动画类之前， CompositionTarget . Rendering 是最适合实现动 ® j 的 T . 
具。这种方式也称为“手动” （ manual ) 动 Wi , 因为程序耑要根据逝 去的时 间自行 it 算动 Lfflj 的 
参数。 

!%1 蛮资源中有一个 ExpandingText 4例项 1.1。该项 IJ 在 CompositionTarget.Rendering 
件处理程序中修改 TextBlock 的 FontSize , 使文本变大或变小。初始化这个 TextBlock 的 
XAML 如卜'所 

项 FI: ExpandingText | 义件 ： Main Page, xaml < 片段 } 

<Grid Background 3 "(StaticResource ApplicationPageBackgroundTheraeBrush)"> 

〈TextBlock Name= M txtblk M 

Text="Hello, Windows 8!" 

HorizontaIAlignment-"Center" 

VerticalAlignment="Center'' /> 

</Grid> 

在该项 U 的代码隐藏文件中，构造函数订阅了 CompositionTarget . Rendering 讲件。_ 
件处理程序第:个参数的类切为 object ， 但实际的类型为 RenderingEventArgs 。 这个参数类 
喈有一个类甩为 TimeSpan 的 RenderingTime 属性，吋提供自程序启动以来己经流逝的时间。 


项 H: ExpandingText | 文件： MainPage.xaml .cs ( 片 段 ) 
public sealed partial class MainPage : Page 
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txtblk.FontSize 


scale * 143; 


这段代码 M •有一定的代表性。在4秒的周期内，变 Mt 在0到丨之间变化，变缺 scale 
则从0变到1再到0,从而使 FontSize 从1变到144再到1。(这段代码不会使 FontSize 的 
值变为 0, 否则会有异常抛! li 。 序刚开始运行时会让人感觉有些卡顿.这是 R 为要对不 
同大小的宁•体进行像無•化。但在程序步入 IH 轨后，动阃会变平滑，且无闪烁。 

颜色也讨以随动_变化，这 1 R 提供两种方法。虽然后一种方法优 F 前一种，但作为对 
比，卜'面先来肴萄•第•种方法-示例项 ManualBrushAnimation 的 XAML 文件如下所4;。 

项 ManualBrushAnimation I 义件 ： Main Page, xaml (片段 > 

<Grid Name="contentGrid"> 

<TextBlock Name= M t:xtiblk" 

Text="Hello, Windows 8!" 

FontFcimily= M Times New Roman" 

FontSize:"96" 

FontWeight="Bold" 

HorizontalAIignment="Center" 

VerticalAlignment 二 "Center" /> 

</Grid> 

Grid 和 TextBlock 均未定义画笔。根据变化的颜色创建 _ 笔的工作是由 

CompositionTarget.Rendering 事件处理程序充成的。 

项月： ManualBrushAnimation I 文件： MainPage.xaml.cs (片段 } 
public sealed partial class MainPage : Page 
( 

public MainPage() 


this.InitializeComponent(); 
CompositionTarget.Rendering 


OnCompositionTargetRendering; 


void OnCompositionTa rgetRende r tng(obj ect sender, object args) 

( 

RenderingEventArgs renderingArgs = args as RenderingEventArgs; 
double t = (0.25 * renderingArgs.Rendering!ime.TotalSeconds) % 1; 
t=t<0.5?2*t:2-2*t; 

// Background 

byte gray = (byte)(255 * t); 

Color clr = Color.FromArgb(255, gray, gray, gray); 
contentGrid.Background = new SolidColorBrush(clr); 

// Foreground 

gray = (byte)(255 - gray); 

clr = Color.FromArgb(255, gray, gray, gray); 

txcblk.Foreground = new SolidColorBrush(clr); 


随着 Grid 背撗颜色由 《 变 ft 冉变黑 ， TextBlock 7 -体颜色则从^到您冉到内，周而 

虽然效果+错，但毎一帧(大概60次 每秒) 都会创让两个 SolidColorBrush 对象，然；[1它 
们又被迅速销毁，其实这是没有必耍的。史好的方 忒是在 XAML 文件中创建两个 
SolidColorBrush 对象。 


项 fl: ManualColorAnimation 
<Grid> 

<Gr id. Background 


文件 : MainPage .xaml ( 片段 > 



<SolidColorBrush x:Name="gridBrush" /> 
</Grid. Background 



FontWeight="Bold" 

HorizontalAlignment="Center" 



<TextBlock.Foreground 〉 

<SolidColorBrush x : Name="txtblkBru^h" /> 
</TextBlock.Foreground 〉 



对 T 这个示例，这两个 SolidColorBrush 对象的牛命周期程序的牛:命周期相当。为其 
命名后，我们便 Kf 以在 CompusitionTarget.Rendering 处理程序中访 N 它们。 

项 H: ManualColorAnimation | 文件： MainPage.xaml .cs (片 段〉 

void OnCompositionTargetRendering(object sender, object args) 

i 

RenderingEventArgs renderingArgs = args as RenderingEventArgs; 
double t = (0.25 * renderingArgs.RenderingTime.TotalSeconds) % 1; 



byte gray = (byte)(255 * t); 

gridBrush.Color = Color.FromArgb(255, gray, gray, gray); 



gray = (byte)(255 - gray); 

txtblkBrush.Color = Color.FromArgb(255, gray, gray, gray); 


运行之初吋能没冇什么不同，因为每一帧都有两个 Color 对象被创建和销毁。这甩不 
应称其为“对象”，因为 Color +是类，而是结构。称之为 Color 值史为贴切。 Coloi •值存 
在栈 ( stack ) h , +需要像堆 ( heap ) 那样开辟内#空间。 

要避免在堆 L 频繁开辟空间。毎秒60次的速度在堆 I :创建对象会涉及较大的性能开 
销。这个¥例的改进之处在丁 • SolidColorBrush 对象会' •戽保持在 Windows Runtime 飢合系 
统中。该程序有效地利用了 m 合层并 M 修改 W 笔的厲性，因此敁 小效 果有所改善。 

该程序还展示 r 依赖属性的独特之处，即依赖《性能够以一种较为结构化的方式响应 
变化。正如 本艿 / r ； 面要介绍的 ， Windows Runtime 内建的动1叫工具只能依赖属性进行操 
纵。基于 CompositionTarget . Rendering 的手动动画也有类似的限制。书运的是 ， TextBlock 
的 Foreground M 性和 Grid 的 Background 属性均是 类把为 Brush 的依赖 M 性，并 II . 
SolidColorBrush 的 Color 厲性 t ! i 是依赖厲性。 

事实上，我们每当遇到依赖属性时，都应该思考“如何在动_中使用它”。举例来说, 
GradientStop 类的 Offset M 性是依赖属性.因而町以通过它來实现果种特殊动_效果。 

4例项丨丨 RainbowEight 的 XAML 文件如卜 '所 

项 R: RainbowEight | 义件： MainPage.xaml 《片段 > 





<LinearGradientBrush x:Name="gradientBrush"> 


<GradientStop Offset="0.00" Color="Red" /> 

<GradientStop 0ffset="0.14" Color="Orange" /> 

<GradientStop O£fset="0.28" Color="Yellow" /> 

<GradientStop 0ffset="0.43" Color="Green" /> 

<GradientSCop Offset="0.57" Color="Blue" /> 

<GradlentStop Offset="0.71" Color="Indigo" /> 

〈Gradientstop Offset-"。.86" Color="Violet" /> 

<GradientStop Offset="1.00" Color="Red" /> 

<GradientStop Offset="l•14" Color="Orange" /> 

〈GradientStop Offset="l.28" Color="Yellow" /> 

<GradientStop Offset="l.43" Color="Green M /> 

<GradientStop Offset="l.57" Color="Blue" /> 

<GradientStop Offset="1.71" Color="Indigo" /> 

<GradientStop Offset="l.86" Color="Violet" /> 

<GradientStop Offset="2.00" Color**"Red" /> 

</LinearGradientBrush> 

</TextBlock. Foreground 
</TextBlock> 

</Grid> 

Offset 值大 1 的 GradientStop 对象是不 Kf 见的。 TextBlock 元索也不易被察觉，「天 I 力 
它的 FontSize 力1。在 Loaded 囀件的 处理程序中， Page 类获得了这个 TextBlock 元紊的 
ActualHeight ， 将其保存到•个字段中，并随后订阅 CompositionTarget . Rendering 事件。 

项 RainbowEight | 义件： MainPage.xaml.cs { 片段） 
public sealed partial class MainPage : Page 
( 

double txtblkBaseSize; // ie, for 1-pixel FontSize 

public MainPage() 

( 

this.InitializeComponent(); 

Loaded += OnPageLoaded; 

} 

void OnPageLoaded(object sender, RoutedEventArgs args) 

{ 

txtblkBaseSize = txtblk.ActualHeight; 

CompositionTarget.Rendering += OnCompositionTargetRendering; 

) 

void OnCompositionTargetRendering(object sender, object args) 

( 

// Set FontSize as large as it can be 

txtblk.FontSize = this.ActualHeight / txtblkBaseSize; 

// Calculate t from 0 to 1 repetitively 

RenderingEventArgs renderingArgs = args as RenderingEventArgs; 

double t = (0.25 * renderingArgs.RenderingTime.TotalSeconds) • 1; 

// Loop through GradientStop objects 

for (int index = 0; index < gradientBrush.GradientStops.Count; index++) 
gradientBrush.GradientStops[index].Offset 二 index / 7.0 - t; 

) 

在 CompositionTarget.Rendering 事件的 处理程序屮 ， TextBlock 的 FontSize 屈性根据 
Page 的 ActualHeight 厲性计算得到，这个行为非常类似丁•一种手动的 Viewbox 。 字体不会 
4页面同尚，冈为 TextBlock 的 ActualHeight 包含卜仲部和变音符号的高度。7休被尽 n | 能 
地放大，并且能够随屏幕方向的变化而变化。 

此外， CompositionTarget.Rendering 事件处理程序会 +断地修改 LinearGradientBrush 
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中所有 GradientStop 对象的 Offset M 性，因此7•符会黾现卜別所水的彩虹动傾 i 效果 (吋惜 15 
中无法展现，+过吋以访问作# M 站杏 肴)。 



有人吋能会 质疑： 以敁示器的帧速修改 TextBlock 的 FontSize 厲性， 这忭 做是否有必 
要？订阅 Page 的 SizeChanged ，件并在该事件的处理程序中修改这个厲性，这样是否更为 
可取？ 

不•例的做法吋能得有些低效。但依赖厲性冇.种 特性： 只有屈性 ( fiiF . 发卞变 化时对 
象 I 会进行通知。如果诚性被设为原值.则+会有仟何影响，+信你 nj + 以尝试通过订阅 
TextBlock 本身的 SizeChanged 7 Ji 件来加以验 ill :。 




第 4 章基于 Panel 的布局 

Windows Runtime 程序- 般包含一个或多个派牛 -tl Page 的类。毎个!) flfti 对应一个由若 
干元桌 m 成的可 m 树，元尜是分 feim 织的。 Page 对象的 Content 厲性只 i ； 持中个 几蒺，该 
允素般是 Panel 派屮类的实例。 Panel 类定义了名为 Children 的 M 性，诚性类堺为 
UIEIementCollection ( UIElement 派 '+ ■:类和其他血'板实例的银合)。 

Panel 及其派4•:类是 Windows Runtime 动态布周系统的核心。它能够在! Ulfti 大小或方 
向发生改变 时甫新纟11 织其子元素，使其填充•用空间。+同类咽的 Panel 组织其子元素的 
方式冇所+同。例如， Grid 按 M 格方忒饥织子元柰。 StackPanel 能够在水平或贤宵方向依 
次排列子元素 。 VariableSizedWrapGrid +仪吋以在水平或竖育•方向 I :排列子儿素，还 Kf 以 
作需要时添加行或列(炎:似 f Windows 8 “ 开始”界曲)。 Canvas 允许通过像素少标来指定 
元素位罝。 

为中衡父元桌~子元素需求的丫盾.布局系统变得越来越复杂。局部来看，布局系统 
是“子元尜驱动的” ( child - driven ). 即毎个子允索决定身尺十，父元素耑要力其提供足够 
的空间。但布局系统也是“父元素驱动的” （ parent - driven )， 在这种情况下，父元素的尺寸 
受限，无法为子元素提供超过自身大小的空间，从而限制: T - 元袭的尺十。 

N 贞中也冇类似的概念^例如， ft 冇宽度的 HTML 页血是父职动的，因为它受 M 示器 
或浏览器说口宽度的制约。然而.贞 tfci 的尚度是子驱动的， W 为豇面的尚 度取决-丁_内容。 
如果内容超过浏览器窗口的 A 度，则会 W 水滚动条。 

冉华一个 Windows 8 “开始”界面的例子。在乖苠方向 I :,应用程序磁贴的数 U 是父 
元索驱动的， W 为其受制于屏幕的岛度。水平方向是子驱动的， W 为如 采磁 贴在水平方向 
超出 屏幕敁 示范围，则耑要滑动滚动条才能办符超出的部分。 

4.1 Border 元素 

HorizontalAlignment 和 VerlicalAlignment 是两个 b 布局有关的似屯:要的厲性，由 
FrameworkElement 类定义， " J 选的值来 N 同名的枚华类吧： HorizontalAlignment 和 
VerticalAlignment 。 

iK 如第3爭:介绍的 ， HorizontalAlignment 和 VerticalAlignment 的默认値并非 Left 和 
Top ， 而分别是 HorizontalAlignment.Stretch 和 VerticalAlignment.Stretch Stretch 设 W 说明 
布局是父驱动的，即自动拉仲到父元素大小，似这一点可能不是特别宵观。 I .—章有 
—个示例， TextBlock 彼拉伸到父允索的大小，并捕获 f 父元桌的所有 Tapped 事件。 

只要元桌的 HorizontalAlignment 或 VerlicalAlignment 賊性的位+是默认的 Stretch , 布 
周便会切换个:广驱动模戚，也就是说，爲有 该设裨 的兑素会根据内容设咒 |'1 身宽度或高度。 

在 jiillU I •.处父允矣和子冗素关系时 ， HorizontalAlignment 和 VerticalAlignment 的艰 
要性就很明显。假设要为 TextBlock 显示一个边框，但会发现它没有与边框有关的属性 



Windows . ULXaml . Controls 命名空间有 个 名为 Border 的元素,它有 Child 属性。这样，便 
可以将 TextBlock 置于 Border 内，再将这个 Border 置于 Grid 内(如下所示)。 

项 H: NaiveBorderedText I 义 • 件： MainPage.xaml ( 片段） 

<Page ...> 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Border BorderBrush="Red" 

BorderThickness="12 H 
CornerRadius="24" 

Background= , 'Yellow"> 



Foreground="Blue" 



VerticalAlignment="Center" /> 

〈 /Border 〉 

</Grid> 

</Page> 

Border 元素定义的 BorderThickness 属性允许为矩形的四边设置不冋的粗细。如果指定 
四个值，则设 S 顺序依次 为：左 、上、右、下。如果只指定两个值，则第一个值作用于左 
厶两边，第：个值作用 T _ I : K 两边。 ComerRadius 属性用于指定四个圆角的半径。 

请注怠 TextBlock 的 HorizontalAlignment 和 VerticalAlignment 属性设實。 M 然标记看 
起來合理，似实际效果•能并非所期待的(参见 T 图)。 



巾丁 • Border 派生自 FrameworkElement ,它也具冇 HorizontalAlignment 和 
VerticalAlignment 属性，其默认值均为 Stretch 。 这使 W Border 会被拉伸到父元索的尺、 j •大 
小。为获得所期销的效果，需要将 HorizontalAlignment 和 VerticalAlignment 设齊从 
TextBlock 转移到 Border 匕 

项 R: BetterBorderedText | 义件： MainPage.xami ( 片 段） 







</Grid> 

这段代码还通过 Margin 厲性为 TextBlock 添加 _ T 四分之一英 I 的边距。这使得 Border 
比文本每边大四分之一英寸(参见卜' 图)。 



Margin 厲性是 FrameworkElcment 类定义的，因而被所有元素继承。该诚性的类型为 
Thickness ( 1 j BorderThickness 件:的炎平.相同)，即带有 Left , Top、Right 和 Bottom 屈性的 
结构 。 Marginffl r •限定元素周1制空 1'1 区域的大小， 因而元系之 间不必彼此紧贴。该 M 性在 
实践当中较为常用。~ BorderThickness 类似 ， Margin uj ■以包含四个不同的值。在 XAML 
中，这四个值依 次用〗 •及小•人、 I .、心、卜的边距。如果只指定两个值，则第一个值表示 
左右边距，第：个值表示 h 下边距。 

此外， Border 还定义了名为 Padding 的属性。 1 _j Margin 不同的是， Padding 表示元袭 
内部的中间。卜曲让我们移除 TextBlock 的 Margin 域性，并为 Border 添加 Padding 屈性。 

< Border BorderBrush= n Red" 

BorderThickness*" 12 w 
CornerRadius="24" 

Background®"Yellow" 

Horizonta 1A1 ignment*="Cen ter •' 

VerticalAIignmenc="Center" 

Padding= ,, 24" > 



FontSize="96" 

Foreground="Blue n /> 



效果是相同的。不论哪种情况 ， TextBlock I :的任何 Horizontal Alignment 或 
VenicalAlignment 设 H 均无关紧要了。 

从布局的角度看， Margin 定义的窄间会被计入儿尜尺寸，但此空间不受元素控制。例 
如，元 蒺+能 控制边距部分的货锐颜色。这部分颜色取决 P 父元桌的设置。再如，设置边 
距的元索尤法获取边距区域的用户输入。如采点击该 R 域，父元素就会收到 Tapped ，件。 
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Padding 属性的类甩也为 Thickness . 但只有儿个类定义/ Padding 厲性，其中包括 
Control 、 Border > TextBlock , RichTextBlock 和 RichTextBlockOverflow。Padding IS 性用丁 • 

定义元袭内部的边距区域。该 K 域会被符作允素的部分，支持包括获取 ffl 户输入在内的 
所冇特性。 

如果希销 TextBlock 能够响应点击垠件.并咼 Wr 文本部分，包含文本周围100 
像尜范内，则志要将 TextBlock 的 Padding W 性设靑为100, 而小应设背 Margin 厲性。 

4.2 矩形与椭圆 

第2章介绍过, Windows . Ul . Xaml . Shapes 命名空间包含用 f M 现矢 M 图形 的类- 可绘 
制的矢®图形包括线段、曲线和 填允的 区域。 Shape 炎木夂 派牛: FrameworkElement ， 定 
义了许多属性，如 Stroke (用于指定绘制线段或曲线的劇笔)、 StrokeThickness 和朽11( 用] •指 
定用 T 呈现闭合区域的 Wi 笔沁 

派生 自 Shape 的类有6个。其中的 Line , Polyline Polygon 吋以根据平标点绘制茛线 
段， Path 可以瑪过 Windo W s . Ul . Xaml . Media 中的类来呈现直线段、弧线和贝寒尔曲线。 

另外两个 Shape 的派生类为 Rectangle (矩形)和 Ellipse (椭 圆)。虽然名称很简中 .， 但谣要 
注总的是，这两种允尜+能用平.标点来定义阁形。平例来说， Klfli 这段 XAML 呈现/一个 
椭圆。 



Fill=" 


«注, S , 这个椭圆是填充整个容器的(参见卜图 



U 其他 FrameworkElement 的派生类-拃 ， Ellipse lii 具有默认值为 Stretch 的 
HorizontalAlignment 和 VerticalAlignment M 性。 +同的是 ， Ellipse 个会仏 S 避免 某叫 设贸 

导致的+良 d -。 

持将 Ellipse 的 HorizontalAlignmenl 或 VerticalAlignment 域性设 K 为作默认值会怎样？ 







试 f ! 结果是椭圆会收缩，良至完全 消失。 事实上，我们很难想象它会有什么其他合理 
行为。如果小希染 Ellipse 或 Rectangle 元素填充幣个容器，则只能诚式地设置它们的 Height 
和 Width 属性。 

Shape 类还定义了 Stretch 属性 ( ii ¥+ 耍 1 j HorizontalAlignment 和 VerticalAlignment 厲性 
的默认值 Stretch 相混淆)。 该厲性 U Image 和 Viewbox 定义的 Stretch 厲性 类似。例如，在 
术例项 H SimpleEllipse 中，若将 Stretch 厲性设贾为 Uniform , 则椭圆的轴和短轴会变为 
等长，进而形成一个正0。将 Stretch 厲性设背为 UnirormToFill 也会使其变成 IT •圆，但其 
直径取决丁•容器边长的最大值，而这会使这个圆被截断，如下图所示。 



HorizontalAlignment 和 VerticalAlignment 厲性" I 以用来控制哪部分被截断 c 


'-j Ellipse _|卜:常类似， Rectangle 也 JVft Border 的一吗性质。 下表 列出了两 yiiiK 相关的 
属性。 



Border 'j Rectangle 最大的 K 别是 Border ft 有 Child 屈性，而 Rectangle 没有 》 


4.3 StackPanel 

Panel 及其派 ( k 类是 Windows Runtime 布局系统的核心。 Panel 木身只定义了少数儿个 
厲性，其中最重要的是 Children 。 只有 Panel 及其派生类允许包含多个子元索。 

Panel 及相关类的继承关系如 F 所不、 

Object 

DependencyObject 
UI Element 

FramevvorkElement 








Panel 


Canvas 

Grid 

StackPanel 

VariableSizedWrapGrid 

除以上 4 个派生类之外，另外还有几个不允许在 ItemsControl 上下文之外使用的。第 
11 章会具体介绍这鸣类。第 5 章会介绍 Grid 类，而木章将重点放在其余 3 个 Panel 派生 
类上。 

这几个标准血板元素中， StackPanel 无疑是 S 好用的。顾名思义，它会横向或纵向排 
列其子元素(在默认情况下纵向排 列）。 如果纵向排列，子元紊可以具有任意高度，但 
StackPanel 只提供其所需 耍的 空间。示例项目 SimpleVerticalStack 展示了这一特性。 

项 R: SimpleVerticalStack | 义件： MainPage.xaml ( 片段 } 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 



FontSize="48" 

HorizontalAlignment= , 'Right" /> 

<Image Source="http :/ /www.charlespetzold.com/pw6/PetzoldJersey.jpg" 
Stretch="None" /> 

<TextBlock Text="Figure 1. Petzold heading to the basketball court" 



〈Ellipse Stroke="Red" 

StrokeThickness="12" 



XAML 中 StackPanel 子元尜的顺序与子元素显小•顺序相同(参见卜图)。 
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i # 注意,这里将 StackPanel 作为 Grid 的子元素。 Panel 可以嵌套,而且这种情况十分 
常见。 对 P 这个术例， 我们吋 以用 StackPanel 来替换 Grid , 并为其设 W 相同的 Background 
属 性值。 

StackPanel 中的元蒺只占据它所需要的 A 度，但会保持 Utfll 板同宽(正如氺例中分别心 
对齐和 * 对齐的两个 TextBlock 所展示的)。对于纵向排列的 StackPanel , 子元尜的任何 
VerticalAlignment 设置均会被忽略。 

Image 的 Stretch M 性被设置为 None , 即按原尺十!位图。如果使用默认值 Uniform , 
那么 Image 会被拉伸至 StackPanel 的宽度(与 Page 同宽)，图片按比例放大。这样，图片会 
将卜 Ifti 的允蒺挤压到屏幕下部， 甚辛 :挤 ! li M 示区域。 

这段 XAML 还定义了 •个 Ellipse 。 它为何没有被显示! li 来？与 StackPanel 的其他子元 
袭-样， Ellipse 会在乖直方向上得到所耑的空间， 似实际 上它一点也+需要， 因此 收缩至 
消失。若希望这个 Ellipse 可见(比如 F 图),需要将 Height 属性设置为一个非零值(如48>。 



若将 Ellipse 的 Stretch 属性设 W 为 Uniform , 该元尜就会变成一个〖|:關，但+会变得 
很大。 

这个 StackPanel 占据了整个屏幕空间^为什么这么说呢？在使用血板时，要知道它占 
据了多大空间,为其设 置一个 特别的 Background 即可。 例如： 

<StackPanel Background="Blue w > 

'-J FrameworkElement 的派牛.类-样， StackPanel 也具有 HorizontalAlignment 和 
VerticalAlignment 属件。如果被设 WJj 非默认值， StackPanel 则会尽川能地 汛缩 其子儿桌， 
而&变化非常剧烈。 F 图肢示了一个 Background 为 Blue 的 StackPanel ,它的 
HorizontalAlignment 和 VerticalAlignment 均被设 W 力 Center 。 

这种情况卜， StackPanel 的宽度取决 P 鉍宽子元索的宽度。对 ]• 木小例 ， StackPanel * 
疑。图片 F 方的标题同宽。 
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4.4 横向的 StackPanel 


如果将 StackPanel 的 Orientation 属性设置为 Horizontal ， 元素就会横向依次排列。水例 
项 tl SimpleHorizonlalStack 展了这 - 行为。 

项 FI: SimpleHorizontalStack I 文件： MainPage.xaml ( 片段 > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 



VerticalAlignment="Center" 
Horizonta1A1ignment="Center"> 



Fill="Red" 

Width="72" 

Height»"72" 


Margin:"12 0" 

VerticalAlignment="Center" /> 

<TextBlock Text="Ellipse:" 

VerticalAlignment="Center" /> 



〈 /StackPanel 〉 


</Grid> 
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该程序的运行效果如下图所小、 



标记中的诸多对齐设 WiiJ" 能让人感觉有些多余。移除所有 VerticalAlignment 和 
Horizontal Alignment 设 W 之后，得到 卜阁 所示的效果。 



■ • 3r 


此时 ， StackPanel 占据了粮个 lJufti 。 子元素 1 j StackPanel 同尚。 TextBlock 会顶端对齐， 
其他元素则在贤直方向 I: 居中。将 Panel 的 HorizontalAlignment 和 VerticalAlignment 设背 
为 Center 会使份 Panel 被收 紧并被移苹屏 幂中央 ( 如 K 图所 示)。 



StackPanel 的度取决 T 敁尚允 # 的卨度，其他元素均保持 U 之为使所荇元 # 
相对彼此 W • 中对齐， M 简中的办法是将它们的 VerticalAlignment 设 W 为 Center 。 
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4.5 基于绑定与转换器的 WhatSize 

第3章介绍 f 一个叫 WhatSize 的程序，它没能利用绑定，因为 Run 类的 Text 属性不 
是依赖属性，前面曾说过，只有依赖属性支持数据绑定。 

苹运 的是，对 P 包含中行文本的 Run 对象，我们吋以通过在横向的 StackPanel 中使用 
多个 TextBlock 来 梭拟。 示例项0 WhatSizeWithBindings 的标 id 如 F 所示。 

项 H: WhatSizeWlthBindings | 文件： MainPage.xaml < 片段） 



<TextBlock Text="&#x21A4; " /> 

<TextBlock Text="(Binding ElementName=page, Path=ActualWidth)" /> 
<TextBlock Text= M pixels 4#x21A6; H /> 



〈StackPanel HorizontalAlignment="Center" 
VerticalAlignment= ,, Center"> 

<TextBlock Text= M &#x21A5; M TextAlignment= w Center" /> 



<TextBlock Text="{Binding ElementName=page / Path=ActualHeight)" /> 
<TextBlock Text=" pixels" /> 

</StackPanel> 



浩注 意，根元 桌被分 配了一个名称 page 。 该名称用在了获取 Actual Width 和 Actual Height 
诚性的数据绑定标记扩 展中。 b 前一个版木的+冋在于这个程序未在代码隐藏文件中订阅 
任何事件。该程序的运行效采如 K 图所示。 

— 1366 pixels — 


768 pixels 






虽然程序的初始状态是正确的，但木书截稿前的 Windows 8版本小能在屏幕方向变化 
或切换辛辅屏视图时史新界面上的尺 寸值。 

这两个数据绑定能够自动将 double 值转换为字符串对象。那么转换逻辑 " J ■否控制？例 
如，希塑结果保留指定位数的小数。或者，就这个示例程序而言，希望宽度值中包含千分 
位符(如 1,366). 

我们 uj ■以自定义数据转换逻辑，并将其指定给 Binding 对象。 Binding 类有一个名为 
Converter 的属性，类型为1 ValueConverter 。该接口类咽具有两个方法： Convert 和 
ConvertBacko Convert 用于将绑定源转换辛:绑定标， ConvertBack 用丁-在双向绑定中将绑 
定 W 标转换辛:绑定源。 

为创建自定义的转换器，需要创建一个派生自 IValueConverter 的类，并实现该接口的 
两个方法。下曲两个方法只是返回原值，而不包含任何其他逻辑。 


public class NothingConverter : IValueConverter 



如果 只希错 在单向数据绑定中使用转换器，则+需要实现 ConvertBack 方法 。 Convert 
方法的参数 value 来自绑定源(对丁•例程序 WhatSize 来说， value 的实际类喂为 double }。 
TargetType 是 U 标类啊在 WhatSize 中为 string 类甩)。 

对于 WhatSize , 为将浮点数转换为字符串.要求包含逗号分隔符 H . 不带小数点，则吋 
以如下实现 Convert 方法。 

public object Convert(object value. Type targetType, object parameter, string language) 

( 

return ((double)value).ToString("NO"); 

) 

转换器一般具有一定的通用性。例如，如果传入的 value 的类型实现了 IFormaltable 接 
U (如包括 double 在内的数字类印和 DateTime ), 最好能加以处理。 IFomiattable 接口定义了 
带有两个参数的 ToString 方法： 第一个参数为格式字符串，另一个参数是实现 
IFormatProvider 的对象(一般为 Culturelnfo 对象 

除了 value 和 targetType ， Convert 方法还有 parameter 和 language 参数。这两个参数一 
般 XAML 文件中设符。这样一来，卩 丨以利 II 】传给 Convert 方法的 parameter 参数来指定 
ToString 的格式，而通过 language 参数来创建 Culturelnfo 对象。 卜 [ W 的代码是•种实现。 

项 H: WhatSizeWithBindingConverter | 义件： FormatteclStringConverter.es 



public object Convert (object value. Type target Type, object parameter, string language) 





Convert 方法只在满足-定条件的情况卜'才会调用 ToString 方法。如果条 件+满 足，则 
直接返回传入的 value 参数。 

在 XAML 文件中，绑定转换器一般能够以资源的形式定义，进而吋 「 tl 多个绑定共孕。 

JftR: WhatSizeWithBindingConverter | 文 < 牛： MainPage.xaml(IV©) 



x:Class="WhatSizeWithBindingConverter.MainPage" 



Path=ActualWidth # 

Converter={StaticResource stringConverCer}, 
ConverterParameter=NO}" /> 


<TextBlock Text=" pixels &#x21A6;" /> 

</StackPanel> 

<StackPanel HorizontalAlignment="Center" 

Vertica1A1ignment="Center"> 

<TexCBlock Text= M &#x21A5;" TextAlignment="Center" /> 



<TextBlock Text="{Binding ElementName=page, 

Path=ActualHeight, 

Converter:{StaticResource stringConverter}, 
ConverterParameter=NO} M /> 


<TextBlock Text=" pixels" /> 



</Page> 
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请注意 Binding 语法。为丫使其吏易读(且易丁-印刷)，这里将它拆分成『4行 。 Binding 
标记扩展中包含一个 StaticResource 标记扩展，用来引用转换器资源。两个标记扩展均米使 
用引号。 

经过格式化，罕.现的数字得到了一定的改善(参见下图)。 

I 一 1,366 pixels *- 


768 pixels 


4.6 ScrollViewer 方案 

如果元蒺过多， StackPanel 无法显水该怎么办？在实践当中，这种情况十分常见。解 
决方案一般是将带有较多元素的 StackPanel 放入 ScrollViewer 。 

ScrollViewer 有一个名为 Content 的属性，可设買一个屏幕空间无法容纳的元素(如一个 
较大的 Image )。 ScrollViewer 为使用鼠标的用户提供了滚动条。用户也町以通过手势来移 
动其中的内容。在默认情况下， ScrollViewer 还支持通过两个手指对内容进行拉仲和缩放。 
若要禁用该功能，可将 ZoomMode 厲性设贾为 Disabled . 

我们经常耑要 ScrollViewer 纵向滚动(如配合纵向的 StackPanel )。 ScrollViewer 的 
VerticalScrollBarVisibility 属性的默认值是枚平成员 ScrollBarVisibility . Visible 。 此设 ff . 并+ 
总味着滚动条总是•见的。 对丁使 用鼠标的用户，只有在鼠标移动到 ScrollViewer 右侧的 
滚动条才会记示，而鼠标移走则会消失。如果用手指滑动，则会! nU 纟一个非常细的滚动条。 

W 纵向滚动不同，用于设 S 横向滚动的 HorizontalScrollBarVisibility 厲性的默认值力 
Disabled 。 为启用横向滚动，需耍修改该属性。该属性还有另外两 个值： Hidden (只支持手 
指操作而+支持鼠标)和 Auto (如果内容超出屏辂 M 氺范围，行为同 Visible ： 如果不超出屏 
幕，则同 Disabled }。 

示例项目 StackPanelWithScrolling 的 XAML 文件中 ， ScrollViewer 内部定义了一个 
StackPanelo FontSize 属性是在根标签中设寶的，所以作用尹幣个贞血。 

项目 ： StackPanelWithScrolling I 义件； MainPage.xaml ( 片段 } 


x:Class="ScackPanelWithScrolling.MainPage" 




</ScrollViewer> 

</Grid> 

</Page> 

代码隐藏类只需要生成足够多的子项目，从而使 StackPanel 无法在一屏中完全呈现。 
那么怎么获得如此多的项目呢？ Colors 类定义了 141个静态属性，类型为 Color ， 可以通过 
反射获取全部属性值。 

项 StackPanelWithScrolling | 文件： MainPage.xaml .cs ( 片段 } 
public sealed partial class MainPage : Page 
{ 

public MainPage() 

( 

this.InitializeComponent(); 

IEnumerable<PropertyInfo> properties - 



Color clr = (Color)property.GetValue(null); 

TextBlock txtblk = new TextBlock(); 

txtblk.Text = String.Format("{0} \x2014 {1:X2}-{2:X2)-{3:X2)-(4:X2) M / 
property.Name, clr.A, clr.R, clr.G, clr.B); 
StackPanel.Children.Add(txtblk); 


Windows 8 的反射与 . NET 反射稍有不同。为从 Type 对象获取信息，需耍调用一个 
Windows 8特有的扩展方法 GetTypelnfbo 该方法会返回 Typelnlo 对象，能够提供的信息比 
Type 史多。 在这个程序中， Typelnfo 的 DeclaredProperties 厲性能够以 Property Info 对象的 
形忒返回 Colors 类的所有厲性信息。 Colors 中的所有属性均为静态的。通过调用 Propertylnfo 
对象的 GetValue 方法并传入 null , 便可以得到这些属性 的值。 TextBlock 对象用丁敁示 
颜色的名称、英文破折号 ( Unicode 值为 0 x 2014) 及十六进制颜色字节值。该程序的运行效果 
如卜图所示。 



①译 注： 该示例 WN 的 Propertylnfo.GctValue ( 战接受’个 Objccl 炎 « 的 # 数.能够返象的 Wft 值。返 M 哪个 M 
性的价取决入的 Propeitylnfo 如《传入 mill, 则返 M 该舴态 W 性的 




当然，可以使用手指或鼠标进行 滚动。 

为简化反射的使用， C ++ 版本的示例中使用了本人通过 C # 实现的 ReflectionHelper ^ 
库。这个类库也会被本章或其他章节的示例所引用。稍后再对这个类库做进一步阐述。 

用手指消动屏幕会发现 ScrollViewer 能够流畅地响应手指的运动，并具有减速和回弹 
效果。人们可能希望 ScrollViewer 能够满足所有对滚动的盅求，但会发现仵多元素类型已 
内建了 ScrollViewer , 从而本身支持滚动(其中包括第1丨章要介绍的 ListBox 和 GridView )。 
如果 Windows 8 “ 开始”界如也使用/ ScrollViewer ， 这并不让人感到意外。 

对 T •这个小•例，除了名称和色值外，如果能让用户看到实际的颜色岂不是更好？木章 
后面有一个示例正是这样 做的。 

本书到 U 前为止展示过几个类的继承层次结构。若在 Windows 8的文档中杏找这些类 
的 M 次结构，吋能会发现文档中只提供了祖先类的层次结构，而没有派生类。那么本节展 
示的类层次结构是如何得出的呢？本书的配套资源中有一个名为 
DependencyObjectClassHierarchy 的例程序，它 Hf 以通过 ScrollViewer 和 StackPanel 来显 
示 DependencyObject 的所有派生类。 

highlightBrush = 

new SolidColorBrush(new UlSectings().UIElementColor(UIElementType.Highlight)); 

这个示例 b h — 个示例的 XAML 文件类似，只不过这个水例的字号要小一些。 

项 DependencyObjectClassHierarchy | 义件： MainPage.xaml ( 片段 > 



x : Class="DependencyObjectClassHierarchy.MainPage" 



<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush)"> 



</Page> 


该程序能够构建一个类继承关系树。每个节点代表一个类，直接子节点为它的寅接子 
类。为表禾节点，以及节点与子节点间的关系，示例中有这样一个文件。 

项 R: DependencyObjectClassHierarchy I 文件： ClassAndSubclasses.cs 



using System.Collections.Generic; 



class ClassAndSubclasses 


public ClassAndSubclasses(Type parent) 

( 

this•Type = parent; 

this.Subclasses = new List<ClassAndSubclasses><); 


public Type Type ( protected set; get;) 

public List<ClassAndSubclasses> Subclasses { protected set; get;) 


我们以通过反射获取类定义的所有《性，也以通过反射来获取程序集中定义的所 
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有公共类。这些类可通过 Assembly 对象的 ExportedTypes 属性获得。从概念上讲，整个 
Windows Runtime 只与单个程序集关联，为获取该程序集，只需要一个类型，通过该类型 
获得 Typelnfo 对象，从该对象的 Assembly 属性获得 Assembly 对象。 

項目 ： DependencyObjectClassHierarchy I 文件： MainPage.xaml .cs ( 片 段） 
public sealed partial class MainPage : Page 
( 

Type rootType = typeof(DependencyObject); 

Typelnfo rootTypeInfo = typeof(DependencyObject).GetTypelnfo(); 

List<Type> classes = new List<Type>(); 

Brush highlightBrush; 

public MainPage() 


this.Initiali 
highlightBrush 


izeComponent(); 

i « new SolidColorBrush (new UlSettingsO .U 


5. Highlight)); 


AddToClassList(typeof{Win 


5 .UI .Xaml. Dependency^ject)); 


// Sort them alphabetically by name 
classes.Sort((tl, t2)=> 

[ 

return String.Compare(tl.GetTypelnfo().Name, t2.C 


// Put all these sorted classes into a tree structure 
ClassAndSubclasses rootClass = new ClassAndSubclasses(rootType); 
AddToTree(rootClass, classes); 

// Display the tree using TextBlock's added to StackPanel 
Display<rootClass, 0); 


void AddToClassList(Type sampleType) 

I 

Assembly assembly = sampleType.GetTypelnfo().Assembly; 

foreach (Type type in assembly.ExportedTypes) 

{ 

Typelnfo typelnfo = type.GetTypelnfo(); 

if (typelnfo.IsPublic && rootTypelnfo.IsAssignableFrcOT(typelnfo)) 
classes.Add(type); 


void AddToTree(ClassAndSubclasses parentClass, List<Type> classes) 

[ 

foreach (Type type in classes) 


Type baseType = type.GetTypelnfoO.BaseType; 
if (baseType = parentClass.Type) 


ClassAndSubclasses subclass = new ClassAndSubclasses(type); 
parentClass.Subclasses.Add(subclass); 

AddToTree(subclass, classes); 


void Display(ClassAndSubclasses parentClass, int indent) 


Typelnfo typelnfo = parentClass.Type.GetTypelnfo(); 


// Create TextBlock with type name 
TextBlock txtblk = new TextBlock(); 

txtblk.Inlines.Add(new Run 丨 Text = new string(' •, 8 * indent))); 
txtblk.Inlines.Add(new Run ( Text » typeInfo.Name )); 

// Indicate if the class is sealed 
if (typelnfo.IsSealed) 

txtblk.Inlines.Add(new Run 
{ 

Text = " (sealed)". 

Foreground = highlightBrush 

))； 

// Indicate if the class can't be instantiated 

IEnumerable<ConstructorInfo> constructorlnfos = typelnfo.DeclaredConstructors; 
int publicConstructorCount * 0; 



if (publicConstructorCount = 0) 
txtblk.Inlines.Add(new Run 



))； 

// Add to the StackPanel 
stackPanel.Children.Add(txtblk); 

// Call this method recursively for all subclasses 
foreach (ClassAndSubclasses subclass in parentClass.Subclasses) 
Display(subclass, indent + 1); 


这段代码通过向 Inlines 集合中添加 Run 对象来构造显示每个类的 TextBlock 。 在某些 
情况 K , 需要为类层次结构 M 示额外的信息。该程序会检迕类是否被标记为 sealed 及是否 
■ Jj " 被实例化。对 Windows Presentation Foundation 和 Silverlight , 小能被实例化的类一般 
会被定义为 abstract (抽象的)：而在 Windows Runtime 中，这种类的构造函数是受保护的。 

K 图展示了一段 Panel 派生类的类层次结构。 





4.7 布局中的怪异现象 


现解布局机制是优秀 Windows Runtime 开发者的必浴■技能。而为理解布局机制， ■©好 
的方法是己编写一个 Panel 的派生类。第11章 会嵌示 相关的例子，但亲&动手会让人受 
益良多。 

假设有一-个 StackPanel , 在这个 StackPanel 中添加一个 Scroll Viewer , 然后在这个 
ScrollViewer 中添加另一个 StackPanel 。 为得知这样做到底会发生什么，可以如下修改 
StackPanelWithScrolling 项目的 XAML 文件。 

<Grid Background^"(StaticResource AppXicationPageBackgroundThemeBrush)"> 

<StackPanel> 



运行程序后会发现，这样做是行不迎的，无法滚动，原因何在呢？ 

StackPanel 和 ScrollViewer 汁算身创度的方式+冋，并发生了冲突。 StackPanel 根据 
所有子元素的高度之和讣算自身高度。在纵向模式下(默认的>， StackPanel 完全是子驱动的。 
为 il •算总高度，它会先为子元素提供无穷的 ( infinite ) 高度。（在编写自定义的 Panel 时，会发 
现这忭说并不模糊或抽象。它确实用了 Double . Positivelnfinity 值。 ）子元索会根据身的 
然大小 il •算卨度。 StackPanel 最终将这些高度累加得到自身髙度。 

ScrollViewer 的卨度是父驱动的，即它的高度是其父元素决定的。在前血的小•例中，其 
高度与 Grid 、 Page 和窗口的高度相同。 ScrollViewer 之所以允许用户滚动其内容，是因为 
它知道自身高度与子元素(一般为 StackPanel ) 的差距。 

这里将纵向滚动的 ScrollViewer 作为 StackPanel 的子 元素。 为确定 ScrollViewer 的尺 
十， StackPanel 先提供一个无限的高度。那么 ScrollViewer 如何知道身应该多高呢？ 
ScrollViewer 的高度此时变成了子驱动的，而非父驱动的，它的高度就是子元素 StackPanel 
的高度，也就是 StackPanel 中所有子元素岛度之和。 

从 ScrollViewer 的角度看，其高度~内容相同意味着它不耑耍 滚动。 

换茸之，纵向滚动的 ScrollViewer 被背丁 •纵向排列的 StackPanel 中，从 而失去 滚动功 
能，这是完全合乎逻 辑的。 

布局方面还有一种较为常见的怪异现 象：为 TextBlock 设串文本，并将 
Textwrapping 设置为 Wrap 。 在大多数情况下，文本会换行。若将这个 TextBlock W . 7 . 
OrientationM 性为 Horizontal 的 StackPanel 元素中，那么为确定 StackPanel 的宽度 , StackPanel 
需要提供一个无 Pk 的宽度，这样 TextBlock 便不会使文本换行。 

在 WhatSizeWithBindings 和 WhatSizeWithBindingConverter 程序中，横向的 StackPanel 
有效地串联多个 TextBlock 元素。其中的一个 TextBlock 的 Text 属性设 置有数 据绑定。若 
希望.在换行的文本中实现相同效果，该怎么做呢？我们尤法通过 横叫的 StackPanel 实现， 
因为文本不会 换行： 也小能将 TextBlock 替换为 Run 元素来实现，因为 Run 的 Text 属性+ 
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是依赖 诚性。 一种解决方案是在代码中生成文本，另一种解决方案是使用 RichTextBlock (详 
情参见第16章)。 

横向的 StackPanel 无法使作为子元素的 TextBlock 的文本换行，但纵向的 StackPanel 
町以。纵向的 StackPanel 的宽度有限，适合容纳需要换行的 TextBlock 元素 ( iF _ 如稍后要介 
绍 的)。 


4.8 编写一 个简单的电子书应用 


对丁•包含在纵向 StackPanel 元素中的 TextBlock . 我们 u 了以将 TextWrapping 厲性设 K 
为 Wrap 。 该选项使 TextBlock 町以包含较 K : 段落的文本，而不仪仅用来 M 示一两 个词。 
Image 元素也 nj •以包含在 StackPanel 中。这些为编写一个简易的电子书应用创造了条件。 

在著名的 Project Gutenberg 网站”上，" I ■以找到比阿特跗克斯 • 波特 (Beatrix Potter ) 的 
经典审话故货 t ? 《小猫汤姆的故事 》 (The Tale of Tom Kitten . http :// www . gutenberg . org / 
ebooks /14837), 因此可将示例项目命名为 TheTaleOfTomKitten 。 在项目中创建一个名为 
Images 的文件夹。通过下战 Project Gutenberg 提供的木书 HTML 版本，吋以轻松以 JPEG 
格式获得所有插图。插图名称的格式为 tomxx . jpg , 其中 XX 代表不同插图在原书中出现的 
页码。在 Visual Studio 项目中，将28个插图文件添加到 Images 文件夹中。 

这个水例剩 F 的 I :作与 MainPage . xaml 文件有关。这本索话书的每一段落对应一个 
TextBlock , 而 Images 文件夹中的每个 JPEG 文件对应一个 Image 元素。 

我们可以从 Project Gutenberg W 站提供的 HTML 文件找到文字与图片位 賈关系 的一些 
线索。通过原版《小猫汤姆的故_‘并》的 PDF ( http :// archive . org / details / taleoflomkinenOOpottuoft ) 
讨以得知作者对 此卞; 图片与文本的组织方式，有两种模式。 

(1) 文字出现在偶数页的灰侧，插图/ I :奇数页的右侧。 

(2) 文本出现在奇数页的右侧，插图在偶数页的左侧。 

为保持与原书一致的格式，需要针对毎种情况修改文本与图片的顺序。因此，在 XAML 
文件中会出现一些书!} I 布局的交替变化。 

rll 丁要定义如此多的 TextBlock 和 Image 元素，所以样式! ni 然是必不可少的。 

项目： TheTaleOfTomKitten | 文件： MainPage.xaml ( 片段） 

<Page.Resources 〉 

<Style x:Key="commonTextStyle M TargetType="TextBlock"> 

〈Setter Property="FontFamily M Value= w Century Schoolbook" /> 

〈Setter Property= M FontSize H Value-"36" /> 

<Setter Property="Foreground" Value="Black" /> 

<Setter Property="Margin" Value="0 12" /> 

</Style> 


<Style x : Key="paragraphTextStyle" TargetType= H TextBlock" 
BasedOn-"{StaticResource commonTextStyle}"> 

<Setter Property="TextWrapping" Value="Wrap" /> 
</Style> 


CD if 注： 这足 个站. 免赀提供数以万 il 的、 岛质 M 的屯/ |5。 
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<Style x : Key-"frontMatterTextStyle" TargetType="TextBlock" 



<Setter Property="TextAlignment" Value="Center" /> 

</Style> 

<Style x : Key="imageStyle" TargetType="Image"> 

<Setter Property="Stretch" Value="None" /> 

<Setter Property= ,, HorizontalAlignment" Value:"Center" /> 

</Style> 

</Page.Resources > 

Margin 设 W 为段落之间提供了间 空。 TextBlock 儿 索引用 paragraphTextStyle (正文段落 
的 样式) 或 frontMaUerTextStyleO ? 中前面的标题及其他信息的样 式)。 " J " 以为 Image 元疾设 
置隐式样式， M 需要移除样式的 x:Key 特性及 Image 元素的 Style 特性即可。 

用来显示前言的 TextBlock 具有自己的 FontSize 设置。由丁•此书是 d 纸黑宁•印刷，因 
Iflj 这里将 TextBlock 的 Foreground 属性硬编码为黑色，将 Grid 的 Background 属性硬编码为 
白色。 为限制每行的长度，这里将 StackPanel 的 MaxWidth 设置为640,并将 StackPanel 
限定在 ScrollViewer 中间。卩而的标记片段展示了 TextBlock 和 Image 元素的关系。 

项 R: TheTaleOfTomKitten | 文件： MainPage .xaml < 片段 } 

〈Grid Background="White"> 



<TextBlock Style="{StaticResource paragraphTextStyle}"> 
&#x2003;&#x2003;Mittens laughed so that she fell off the 
wall. Moppet and Tom descended after her; the pinafores 
and all the rest of Tom's clothes came off on the way down. 



<TextBlock Style="{StaticResource paragraphTextStyle}"> 

&#x2003;&#x2003; 44 Come! Mr. Drake Puddle-Duck,” said Moppet 
— “Come and help us to dress him! Come and button up Tom!” 
</TextBlock> 

<Image Source:"Images/tom39.jpg" Style="{StaticResource imageStyle)" /> 



<TextBlock Style="{StaticResource paragraphTextStyle)"> 

&#x2003;&#x2003;Mr. Drake Puddle-Duck advanced in a slow 
sideways manner, and picked up the various articles. 

</TextBlock> 

<Image Source="Images/tom40.jpg" Style:"{StaticResource imageStyle)" /> 

</StackPanel> 

</ScrollViewer> 

</Grid> 

如下图所水，每段幵头的两个 &# x 2003; 字符为空格，用 T - 提供首行缩进 ， TextBlock 
类并未提供该功能，但 RichTextBlock 提供了(详见第16章)。 

这个电子书程序支持横向•模式和纵向显示模式。 








4.9 StackPanel 子项的定制 

前而展示了一个程序，能够记示 Windows Runtime 中141种预定义的颜色。该程序能 
够敁术颜色的名称和 RGB 值。下酣我们来实现一个名力 ColorListl 的示例。先来看 一卜该 
程序完成后的效果(参见卜 图)， 这样吏能够做到有的 放矢。 



此程序总共包含283个 StackPanel 元素。141种颜色，每种颜色需要两个 StackPanel 
元素:一个纵向的 StackPanel , 用于容纳一对 TextBlock 元素:一个横向的 StackPanel , 用 
丁-容纳一个 Rectangle 和一个纵向的 StackPanel 。 在 ScrollViewer 中，这些横向的 StackPanel 
作为主 StackPanel 的子元索。主 StackPanel 通过 XAML 文件创建。 







义件： MainPage.xaml ( 片段 } 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush J"> 



<StackPanel Name="stackPanel" 

HorizontalAlignment="Center M /> 

</ScrollViewer> 

</Grid> 

虽然 StackPanel 在 ScrollViewer 中是中间对齐的(与 fi 宽的子元素同宽 )， 但 ScroliViewer 
仍然占据整个宽。这样，町见的滚动条或滑块均会出现在页面的最厶端。另外，我们也 
可以将 HorizontalAlignment 设置移至 ScrollViewer 。 在这种情况下，内容仍会居中，但 
ScrollViewer 与 StackPanel 同宽。 

代码隐藏类的构造函数会在迭代 Colors 类的 静态厲 性时为每种颜色创建嵌套的 
StackPanel 元素。 

项 H: ColorListl I 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 


public MainPage 0 



Height ■ 12 , 

Fill = new SolidColorBrush(clr), 
Margin - new Thickness(6) 


horzStackPanel.Children.Add(rectangle); 
horzStackPanel.Children.Add(vertStackPanel); 
StackPanel.Children.Add(horzStackPanel); 



这段代码虽然没什么错误，但坷能有无数种吏好的实现方式。所谓“更好”，并非史 
快或史高效，而是更简洁、史优雅，最重 耍的是 更易丁•维护和修改。 

这个示例并未结束， 下一 节将进一步优化这个程序。第11章会介绍一种绝佳的方案. 
到那时这个程序才算完成。 


4.10 UserControl 的定制 


带有颜色的列表项(嵌套的 StackPaneU TextBlock 和 Rectangle } 是4例项 ColorListl 
的兗点。这拟木看上去难以实现(我们+能 d : MainPage . xaml 文件中实现这种效果)，闪为无 
法通过 XAML 来“生成”列表项的实例，而复制粘贴这141个列表项吋能是 S 糟糕的选择。 

下曲我们来创建 ColorList 2. 以便了解另一种实现这种界面的常见方法。创建 ColorList 2 
项 U 后，在解决方案资源管理器中右击项 H 名称，选择“添加”丨“新建项”。在“添加新 
项”对话框中，选择“用户控件”，将其命名为 “ Colorltem . xaml” 。 Visual Studio 会创建 
一对文件，分别为 Colorltem . xamI 和对应的代码隐藏文件 Colorhem . xaml . cs 。 

在 Visual Studio 创建的 Colorltem . xaml . cs 文件中， ColorList 2 命名空间卜 •定 义了 一 个名 
为 Colorltem 的类，该类派生& UserControl 。 



public sealed partial class Colorltem : UserControl 
public Colorltem(string name. Color clr) 



Visual Studio 创建的 Colorltem . xamI 文件以 XAML 的形式定义了以 K 内容 - 



xmlns="http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/ 2006 /xaml" 
xmlns:local="using:ColorList2" 

xmlns:d="http://schemas.microsoft.com/expression/blend/ 2008 " 
xmlns:mc="http://schemas.openxmlformats.org/markup-cornpatibility/ 2006 " 



您或许在前文中读到过 UserControl , 因为 Page 派生& UserControl 类。名称中的 user 
所指的并非应用程序的最终用户，而是程序员。派生 UserControl 类是创建&定义控 件最为 
简中.的一种方法，因为我们 iij ■以在 XAML 文件中定义控件的可视 元系。 UserControl 定义了 
—个名为 Content 的属性。巾 P 该域忭是内容属性. UserControl 标签内添加的所有元素部 
会被设腎到 Content 属性上。 
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Colorltem.xaml 文件中的 d:DesignHeight 和 d:DesignWidth 属性是供 Microsoft 
Expression Blend 使用的，我们叫以忽略。控件的实际大小取决丁•其内容。 

下血，我们在 Colorltem.xaml 文件中定义颜色列表项的 hJ •视元素。 

项 FI: ColorList2 I 文件： Colorltem.xaml ( 片段） 

<UserControl 

x: Class="ColorList2. Color I tern"...> 



<StackPanel Orientation= M Horizontal n > 
<Rectangle Name="rectangle" 


Width="72" 

Heighf"72" 



<StackPanel VerticalAlignment="Center''> 

<TextBlock Name="txtb1kName" 
FontSize="24 n /> 


<TextBlock Name= M txtblkRgb" 
FontSize="18" /> 

</StackPanel> 



</Grid> 

</UserControl> 

列表项中元素的层次结构 W ColorListl 中的一致，+同的是 Rectangle 和两个 TextBlock 
元索都具有名称，因此可以在代码隐藏文件中访问它们》 

项冃： ColorList2 I 文件： Colorltem.xaml.cs 《片段 > 
public sealed partial class Colorltem : UserControl 
I 

public Colorltem(string name, Color clr) 



rectangle.Fill = new SolidColorBrush(clr); 
txtblkName.Text = name; 

txtblkRgb.Text = String.Forma t("{0:X2 J-{1:X2}-{2:X2}-{3:X2)", 



这个类的构造函数 被茁新 定义，接受颜色名称和 Color 值为参数。构造闲数通过这两 
个参数来设置 Rectangle 和两个 TextBlock 元素的属性。 

需要说明的是，在 UserControl 的派生类中使用带参数的构造函数是+被推荐的做法， 
最好通过定义属性来设 W . 参数。这里之所以没这么做，是 W 为这些属性必须是依赖®性， 
就演示 UserCongtrol 而肓，这样做可能有些唣宾夺主。 

由于没有无参构造函数， Colorltem 类不能在 XAML 中被实例化。但对于这个示例是 
没问题的，因为该类不会在 XAML 中被实例化 。句 ColorListl 相比， ColorList 2 的 
MainPage.xaml 文件并未发生变化，但代码隐藏文件有所不同。 

项目： ColorList2 I 文件： MainPage.xaml .cs ( 片段） 
public sealed partial class MainPage : Page 


public MainPage() 
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properties 



.DeclaredProperties; 


(Propertylnfo property it 


(Color)property.GetValue(null); 


stackPanel.Children 


new 

.Add 


/. Name, 


(clrltem); 


每个 Colorltem 通过颜色名称和 Color 值实例化，然后被添加至 StackPaneU 


4.1 1 Windows Runtime 类库的创建 

作为 ColorList 系列的下一个程序，这次我们在类库中实现 Colorltem 类，使其能够共 
享给其他项目。 

Visual Studio 创建的解决方案一 般只有 一个项但在现有的应用程序项目中添加类 
库的做法也七分常见。可以在同-•解决方案中创建一个应用程序项0来测试类库中的代码。 
将必要的代码置于类库中，好让其他应用程序可以在需要时引用它。 

下面我们来创建一个名为 ColorList 3 的程序。在解决方案资源管理器中，右击解决方 
案名称，选择 “ 添加” | “新建项目”。（或者在“文件”菜单中选择“新建项》 ) 在 
“新建项 II ”对话框的左侧窗格中展开 Visual C #| “Windows 8应用商店”节点。在右侧的 
项 U 模板列表中选择“类库”。 

一般来讲，类库名一般巾句点分隔的多级名称组成。项 H 创建后，类库名会被用作项 
0的默认命名空间。类库名一般由公司名(或对等的 名称) 开头。对于这个示例，可将类库 
命名为 Petzold . Windows 8. ControISc 木人不太喜欢多级程序集名称，因此去掉了其中的句 
点，变成 PetzoldWindow 8 Controls 。在应用程序创連后，将命名空间修改力 
Petzold . Windows 8. Controls 。 

Visual Studio 会自动为新类库创建一个名为 Classl . cs 的文件。我们可以删掉它。右击 
项 tl 名称，选择“添加” | “新建”。在“新建项目”对话框中，选择“用户控件”。将其 
命名为 Colorltem 。 在这个示例中，我们稍微美化一下 Colorltem 的外观。 


解决力 • 案： ColorList3 | 项 FI: PetzoldWindows8Controls | 义件： Colorltem.xaml ( 片段 } 



<TextBlock Name="txtblkName M 
FontSize="24" /> 


<TextBlock Name="txtb1kRgb" 


FontSize= M 18 M /> 

</StackPanel> 

</StackPanel> 

</Border> 

</Grid> 



该控件具有一个 Border , 并显式地设置了 Width 属性和 Margin 属性。控件宽度是根据 
Si < :的颜色名 ( LightGoldenrodYellow ) 确定的。 BorderBrush 被设置为一个预定义的画笔。该 
画笔在浅色主题下为黑色，在深色主题下为白色。主题是应用程序决定的(而非类库决定的， 
因为类库没有用 P 设置主题的 App 类)，因而此画笔的颜色由引用这个 Colorltem 的应用程 
序的主题决定。 

创建一个名为 ColorList 3 的应用程序项目。虽然该项目与类库项 H 位于同一解决方案 
内，但应用程序项 H 仍然需要显式地引用这个 类库 。 lli ColorList 3 项 Q 的 “ 引用”节点上 
右击，选择“添加引用”。在“引用管理器”对话框的左侧窗格中选择“解决方案”（表示 
所要引用的程序集位于同一解决方案 内}. 在右侧窗格中选择 PetzoldWindows 8 Controls , 然 
后单击“确定”按钮。 

将两个项 H 7-同一解决方案内有一个 好处： 如果 PetzoldWindows 8 Controls 库被更新， 
那么在牛.成 ColorList 3 项 LI 时， Visual Studio 也会自动 '4 •:成 PetzoldWindows 8 Controls » 
ColorList 3 中的 MainPage.xaml 文件勺前两个示例相同。代码隐藏类需要引入类库的命 
名空间，其他代码与 ColorList 2 —致。 

项 H: ColorList3 I 文件： MainPage.xaml.cs 
using System.Collections.Generic; 
using System.Reflection; 



using Windows.UI.Xaml.Controls; 
using Petzold.Windows8.Controls; 



public sealed partial class MainPage : Page 
{ 

public MainPage() 




程序的运行效果如 K 图所氺。 



创建 Petzold . WindowsS . Comrols 类库时，我们从“添加新项目”对话框中选择的是“类 
库”。 此外，我们也可以选择 “ Windows 运行时组件 ” （Windows Runtime Component )。 对 
于 ColorList 3 这个示例，选择哪种库并无差别，程序都能够正常运行。事实上，甚至可以 
在项目名称上右击，选择“属性”，在 “ 应用程序”选项卡中，将“输出类型”由 “ 类库” 
改为 “ Windows 运行时组件”。 

两种项目类羽的差别 在于： 通过“类库”创建的库只能通过 C # 和 Visual Basic 来访问。 
但除了这两种应用程序， “ Windows 运行时组件”还可以通过 C ++ 和 JavaScript 来访问。 
“ Windows 运行时组件”支持针对 Windows 8应用程序的语言互操作性 (language 
interoperability )。 

凡事有利必有弊。 “ Windows 运行时组件”有 一些“ 类库”没有的限制。例如，公共 
类必须是封闭的 ( sealed )。 如果从 Colorltem 控件的定义中移除 sealed 关键字，那么该类将 
不能作为 “ Windows 运行时组件”的一部分。另一个主要限制与结构类型有关，即不能撻 
露任何非字段形式的公共成员。另外，组件 API 使用的数据类甩也限制在 Windows Runtime 
数据类型中。 ® 

本书配套资源中， StackPanelWithScrolling 的 C ++ 版本使用了 一个用 C # 编写的 
“ Windows 运行时组件” RenectionHelper , 用丁-降低在 C ++ 程序 中使用 反射的难度。第15 
章会介绍一种反向的实现，即通过用 C ++ 编写的 “ Windows 运行时组件”使 C # 程序能够 
访问 DirectX 类。 


4.12 换行的替代方案 

下 llli 我们在另一个项0中引用 PetzoldWindows 8 Controls 库。引用该项14有3种方法。 
方法1:在库项 U 所在的解决方案中添加新的应用程序项目。对于本示例， uj •以在 
ColorList 3 解决方案中添加。这是最简中.的方法。同一解决方案中的两个应用程序可能其有 
某种联系。 


①译注: “Windows 运行时组件” W 有诸多 限制 , 有关详情可阅读 MSDN 中标题 为“用 C # 和 Visual Basic 创珪 Windows 运 
fj 件"的 义中 .N 址： hup://msdn.microsoft.com/zh-cn/library/br23030 1 o 







106 


Windows 程序设计(第 6 版) 


这里并不打算采用这种方法，而是选择以卜两种方法之_。下 ifii 两种方法需要创建新 
的解决方案和应用程序。我们将新的解决方案和应用程序项 H 命名为 ColorWrap , 通过该 
项目来引用 PetzoldWindows 8 Controls 库。 

方法2:在 ColorWrap 项目中右击“引用”节点，然选择“添加引用”。在“引用 
管理器”中，选择左侧窗格中的“浏览”竹点， 并中击 右卜角的“浏览”按钮。找到 
PetzoldWindows 8 Controls.dll 文件所在目录 （位于 ColorList 3 解决方案 
PetzoldWindows 8 Controls 项 0 的 bin/Debug U 录)，然后选抒所需的 DLL 文件。 

采用这种方式的前提是，库项 y 的代码己完成，不需要仟何进一步的修改。这样引 ffl 
的是 DLL , 而非带有源代码的项在本书截稿前，这样做最大的弊端在于 . Windows 8 
不兼容包含 XAML 文件的库。 

那么只有最后一种方法了。 

方法3:在 ColorWrap 解决方案中，右击解决方案名，选择“添加”丨“现有项13”。 
在“添加现有项 U ” 对话框中，找到 PelzoldWindows 8 Controls . csproj 文件。这是 ColorList 3 
解决方案中的项 H 文件，由 Visual Studio 维护。选择该文件。这个库项目小会被复制，目 
标解决方案只包含这个库项 IJ 的引用 。 Visual Studio 会决定在何种情况 Kt 新生成这个库。 

里然 PetzoldWindows 8 Controls 项丨 I 成 ■/" ColorWrap 解决方案的一部分，似 ColorWrap 
应用程序项目仍然需要 敁式地 引用这个库项 U 。在 ColorWrap 项目的“引用”节点 h 右击。 
从解决方案中选择这个库，正如在示例 ColorList 3 中所做的那样。 

分别加载 ColorList 3 和 ColorWrap 解决方案的两个 Visual Studio 实例 f > J ■能同时运行， 
并都允许对 PetzoldWindows 8 Controls 库进行修改。只要在修改过; T ； •保存或编评即吋。如果 
同一文件在两个 Visual Studio 实例中均被打开，并通过其中的一个实例对该文件进行修改 
并保存，那么另一个实例则会在被激活后通知有更改发生。 

经过一番准备后，下面我们将注意力转移到 ColorWrap 程 序上。 该程序将通过 
VariableSizedWrapGrid 面板来 M 示各种颜色。尽管它収名 “《) ■变尺寸”，但它要求所冇子 
元桌具 有相同尺寸，因而本 不例 W 式地设置 T Colorltem 中 Border k 索的 W idth M 性。 

与 StackPanel 类似 . VariableSizedWrapGrid 也具有 VariableSizedWrapGrid M 性，默认 
值为 Vertical 。 Children 集合中开始的几个子元素会为一列。与 StackPanel 不同的是， 
VariableSizedWrapGrid 支持若干列，与 Windows 8 “ 开始”界面很像。这种方式要求 
VariableSizedWrapGrid 可在水平方向 I •.滚动， R 而;对 ScrollViewer 属性做相应设 S 。 
ColorWrap 项 H 的 XAML 文件如 F 所示。 

项目： ColorWrap | 文件： MainPage.xaml ( 片段） 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<ScrollViewer Hori2ontalScrollBarVisibility="Visible" 

VerticalScrollBarVisibility="Disabled"> 

<VariableSizedWrapGrid Name="wrapPane1" /> 

</ScrollViewer> 

</Grid> 

代码隐藏文件与 h —个示例类似，只+过这吼耍将子元素添加至 wrapPanelo 

项 ColorWrap I 义件： MainPage.xaml .cs { 片段 } 

public sealed partial class MainPage : Page 

{ 

public MainPage 0 
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this.InitializeComponent<) ; 

IEnumerable<PropertyInfo> properties « typeof (Colors) .GetTypelnfo () .DeclaredProperties; 

foreach (Propertylnfo property in properties) 

{ 

Color clr = (Color)property.GetValue(null); 

ColorItem clrltem = new Colorltem(property.Name, clr); 
wrapPanel.Children.Add(clrltem); 

» 

) 

) 

程序的运行效果如 f 图所示。 



ltd 板可水平滚动。 


4.13 Canvas 与附加属性 

本章要讨论的 S 后一个 Panel 派生类是 Canvas 。 从某种程度上讲 . Canvas 是最“传统” 
的 ifri 板类型，因为它根据其体的像 桌肀标 来定位元素。 

子元素的哪个属性用来指定自己相对子 Canvas 的位貲？在 UIEIement 和 
FrameworkElement 定义的诸多属性中，没有名为 Location 、 Position 、 X 或 Y 的属性。只有 
用丁•绘制矢最图的元崇具有指定坐标位置的属性，其他元素没有。在 Windows Runtime 中， 
这样的属性没有太大意义，因为 Grid、StackPaneU WrapPanel 等布局元素小需要它们。我 
们通常不使用像蒺坐标来定位元#，但 Canvas 是个例外。 

正因如此. Canvas 定义了用丁-相对于自身定位元素的属性。这些属性被称力“附加属 
性” (attached properly )。 附加属性 ill - -个类(如 Canvas ) 定义，可设胃到其他类的实例 1.( 如 
Canvas 的子允系0。 设置 附加慽性的对象并不耑耍读取厲性值，也不需耍知道属性的来源。 

_ F 面让我们肴看它是如何_ r : 作的。水例项 U TextOnCanvas 的 XAML 文件在默认的 Grid 
中定义了一个 Canvas (也 Kf 以将 Grid 替换成 Canvas )。 这个 Canvas 包含3个 TextBlock 元尜。 

项冃 ： TextOnCanvas I i ： 件： MainPage.xaml ( 片 段） 

<Page 

x:Class= M TextOnCanvas.MainPage" 
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<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush} 



<TextBlock Text="Text on Canvas at <400, 200) 
Canvas•Left="400" 

Canvas.Top="200" /> 



</Page> 

该程序的运行效果如下图所示(略 坫简 陋)。 

Text on Canvas at (0, 0) 

Text on Canvas at (200,100) 

Text on Canvas at (400, 200) 


请注意标记中的特殊语法。 

〈TextBlock Text="Text on Canvas at (200, 100) 



从名称看， Canvas . Lefl 和 Canvas . Top 特性是 Ganvas 类定义的，但被设置到了 Canvas 
的子元素上以便对子元素进行定位。这种通过类名和 厲性名 指定的 XAML 特性就是“附加 
属性”。 

有趣的是， Canvas 实际并未定义任何名为 Left 和 Top 的属性。但它有定义名称与之相 
近的属性。 

为了进一步理解附加属性的 C 作方式，可以看肴在代码中如何设置它们。示例项目 
TapAndShowPoint 的 XAML 文件在默认创建的 Grid 中定义了一个带有名称的 Canvas 。 

项冃 ： TapAndShowPoint I 文件 ： Main Page, xaml ( 片段） 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 



其他的任务巾代码隐藏文件完成(軍写 OnTapped 方法)。该方法会创建点(实际为 Ellipse 
元索)和 TextBlock , 并将两者添加至 Canvas 被点击处。 

项 R: TapAndShowPoint | 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 


public MainPage() 








Canvas.SetLeft(txtblk, pt.X) 
Canvas.SetTop(txtblk, pt.Y); 
canvas.Children.Add(txtblk); 



base.OnTapped(args); 


当屏幕被点击时，点和文本会出现在被点击处(如 卜图所示)。 



在代码中，点的位 胃是像 卜'面这样指定的。在设 S 位 K 后，这个点会被添加到 Canvas 
的 Children 集合中。 

Canvas.SetLeft(ellipse, pt.X); 

Canvas.SetTop(ellipse, pt.Y); 
canvas.Children.Add(ellipse); 


两个步骤的顺序无关 紧要： 可以先将元素添加到 Canvas , 然后设 H 其位筲。 





Canvas.SetLeft 和 Canvas.SetTop 静态方法与 XAML 中的 Canvas 丄 eft 和 Canvas.Top 特性的 
作用是相同的，都是指定子元素位 置的來 标点。（示例中设置点坐标的方法有个小问题，这 
个问题随着 Ellipse 变大而越发明! ni 。 在调用 Canvas . SetLeft 和 Canvas . SetTop 时，应使用点 
的中心来表示被点击的位賈，而+应使用 Ellipse 的左上角。若希望将 Ellipse 的中心坐标设 
1!为变量 pt , 可以将 pt . X 减去宽度除以2得到横坐标，将 pt . Y 减去高度除以2得到纵坐 标。） 

前面提到过， Canvas 并未具体定义 Left 和 Top 属性，而是定义了 Set Left 和 SetTop 静 
态方法和类型为 DependencyProperty 的静态 属性。 如果 Canvas 类是用 C # 编写的，这两个 
返回 DependencyProperty 对象的属性应该像这样定义。 

public static DependencyProperty LeftProperty ( get; } 

public static DependencyProperty TopProperty { get; } 

正如后文要介绍的，这些特殊类型的依赖属性可以设置到 Canvas 之外的元索上。 

有一点值得注意。示例项 H TapAndShowPoint 是像 F 面这样调用 Canvas . SetLeft 和 
Canvas . SetTop 静态方法的。 

Canvas.SetLeft(ellipse, pt.X ) ; 

Canvas.SetTop(ellipse, pt.Y); 

除此以外，还有一种方法(也是合法有效的，并且完全等价)。那就是像卜面这样调用 
子元素的 SetValue ， 并引用 Canvas 定义的静态属性。 

ellipse.SetValue(Canvas.LeftProperty, pt.X); 

ellipse.SetValue(Canvas.TopProperty, pt.Y); 

这种方式与调用 Canvas . SetLeft 和 Canvas . SetTop 是完全等价的，选择哪种取决于开发 
者的个人偏好。 

前文介绍过 SetValue 方法。该方法是 DependencyObject 定义的 ， Windows Runtime 中 
的许多类都继承于它。 FontSize 这样的属性是通过将静态依赖属性传给 SetValue 方法实 
现的。 

public double FontSize 



事实卜_,虽然本人并未读过 Canvas 类内部代码，但吋以确定的是， Canvas 中的静态方 
法 SetLett 和 SetTop 与以下代码是等价的。 

public static void SetLeft(DependencyObject element, double value) 


public static void SetTop(DependencyObject element, double value) 

{ 

element.SetValue(TopProperty, value); 

) 

这两个方法淸楚地展示了 一点： 依赖属性实际被设置到子元素上，而非 Canvas 本身。 
Canvas 还定义了 GetLeft 和 GetTop 方法，方式与上述附加属性相同。 

public static double GetLeft(DependencyObject element) 
return (double)element.GetValue(LeftProperty); 
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public static double GetTop(DependencyObject element) 
i 

return (double)element.GetValue(TopProperty); 

Canvas 类内部通过这两个方法来获取毎个子元素的 Left 和 Top 属性设 S , 从而在布局 
过程中将子元素早.现在指定位置。 

静态方法 SetLeft 、 SetTop 、 GetLeft 和 GetTop 的实现暗示了依赖属性系统用到了某种 
字典。 SetValue 方法允许 Canvas 丄 eftProperty 这样的附加属性存储在某个元素中，而该元 
素不必预先知道该属性的存在，也无需了解它存在的 U 的。 Canvas 可以通过获取这些属性 
的值来决定子元素相对于自身的位胃。 

4.14 Z-Index 


Canvas 还有一个附加属性， uj •以在 XAML 中通过 Canvas . Zlndex 特性设置。属性名 
Zlndex 中的 “ Z ” 代表三维坐标系统的一个维度，方向垂直于屏幕向外，指向用户。 

如果元素发牛.重叠，则一般会按照元素出现在可视树中的顺序显示，即 Children 集合 
前面的元素会被后面的元素遮挡。看一 K 这段标记。 

<Grid> 

<TextBlock Text="Blue Text" Foreground="Blue" FontSize="96" /> 

<TextBlock Text=”Red Text" Foreground= M Recl" FontSize="96" /> 

</Grid> 

红色的文本会遮挡蓝色的文本。 

我们 UJ ■以通过附加属性 Canvas - zindex 来歌写此行为。有趣的是，它对所有板元素均 
有效，而+仅仅针对 Canvas 。 为使颜色文本 M 示在红色文本之上， n ] •以这样做。 



4.15 使用 Canvas 的注意事项 

本章前面有关布局的介绍有很多 Canvas 都不适用。 Canvas 的布局是子驱动的 。 Canvas 
会为子元素分配逻辑 I :无穷的空间。这意味着，每个子元素会以其自然尺、 j •呈现，这个尺 
、 J + 也就是元索所占据的 空间。 Canvas 子元素的 HorizontalAlignment 和 VerticalAlignment 设 
W 会被忽略。类似地，如果将 Image 作为 Canvas 的子元素，那么 Image 的 Stretch 厲性也 
会被忽略，因力 Image 总会以图片的原像素尺十显示。如果式地对 Rectangle 和 Ellipse 
设 W 宽度和卨度，那么它们将收缩至消失。 

虽然 HorizontalAlignment 和 VerticalAlignment 对 Canvas 的子元素无效，但对 Canvas 
本身是有 效的。 对丁•其他曲板，如果将这两个对齐属性设置为 Stretch 以外的值，这些面板 
则会尽 uj " 能地收缩并紧紧包裹子元索，但 Canvas +同 。如果将 Canvas 的 HorizontalAlignment 
和 VerticalAlignment 设置为 Stretch 以外的值，那么不论子元素多大， Canvas 都会收缩至 
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消失。 

虽然 Canvas 会收缩至零尺寸，但子元素的 M 示并+受影响。从概念上讲， Canvas 更像 
是参照点，而小是容器. Canvas 子元素的大小会在布局系统中被忽略。 

我们吋以对 Canvas 的这种特性加以利用。例如，在一个较小的 Grid 中 M 示一个较大 
的 TextBlock 。 



TextBlock 超出 Grid 之外的部分会被截掉。当然，町以增大 Grid , 但某些情况卜_ Grid 
的大小受制约(如受子元岽的影响)。如何在这种情况下仍然使这个 TextBlock 与其他元素对 
齐.而不被 Grid 截断呢？ 

在这种情况下，最好的办法是在 Grid 中添加一个 Canvas , 然沿将 TextBlock ST ' 
Canvas 中。 



</Grid> 


虽然 Canvas 会被 Grid 截断，但作为 Canvas 子元袭的 TextBlock 不会。这个 TextBlock 
会像人们期望那样 M 示(仍与 Grid 的左上角对齐)，+被截断，但会延仲到常规布局之外。 
在类似的场景中，这种方法简中-有效。 




第 5 章控件与交互 

本书第丨章介绍了 FrameworkElement 的派生类和 Control 的派生类之间的区别。为避 
免混洧，我们一般将 FrameworkElement 的派牛类称为“元岽”（如 TextBlock 和 Image ), 但 
这里有必要对其做进一步解释。 

木章的标题喑示元素主要用于显示，而控件注重交瓦，但实际并非一成不变 。 UIElement 
类定义了所有用户输入事件，涉及来 U 触摸屏、鼠标、触控笔和键盘的输入。这说明允索 
和控件都支持丰富的交互方式。 

元素本身在布局、样式和数据绑定方面并不见长。为此， FrameworkElement 类定义了 
包括 Width 、 Height、Horizontal Alignment、VerticalAlignment 和 Margin 在内的许多布局属 
性，还定义了用 P 指定样式的 Style 属性和实现数据绑定的 SetBinding 方法。 

5.1 Control 的特别之处 

从视觉上和功能1_:讲， FrameworkElement 的派牛.类是基本 元素 (类似原子)，而 Control 
的派生类是巾这些基本元素组合而成的产物(类似分 子)。 例如， Button 实际由 Border 和 
TextBlock 构成(在多数情况下如此)。 Slider 由一对带有 Thumb 控件的 Rectangle 元索构成， 
而 Thumb 本身也是通过 Rectangle 实现的 Control 。 可视内容由文本、位图和矢 m 图形组合 
而成的元素大多直接或间接地派生自 Control . 

巾丁- Control 的派生类耑要由其他元素进行组合，所以 Template 成为 Control 定义最甫 
要的属性之一。正如第11章所要演示的，该属性允许我们通过自定义的岈视 树来屯 新定义 
控件的外观。芾新定义 Button 的外观是有意义的。例如，为将 Button 放在应用栏 (app bar ) 
中，我们希望该控件是圆的，而+是矩形的。相对而言，屯新定义 TextBlock 或 Image 的 
外观毫无意义，因为除了添加额外的文本或图片外，其他没有什么做的。如果要为 
TextBlock 或 Image 增添些什么，则需要定义 Control , 因为这需要用基本元索构建 " J 1 见树 
来实现。 

虽然可以从 FrameworkElement 派牛来 创建自定义控件，但之后会立刻发现我们对这个 
派生类无能为力，甚至无法为其添加吋视元素。但若从 Control 类派斗:，则讨以使用 XAML 
来定义可视树，从而为自定义控件建立默认外观。 

Control 类定义了许多本身并+需要的属性。这些属性是为其派生类提供的 。 TextBlock 
用到了其中的 CharacterSpacing 、 FontFamily 、 FontSize 、 FontStretch 、 FontStyle , FontWeight 
和 Foreground 属性，而 Border 用到了其中的 Background , BorderBrush、BorderThickness 
和 Padding )/4 性。 并非 Control 的每个派生类都要用到文本或边框，但 如果伤 创建新控件或 
新模板时需要，则•以方便地利用相关的属性。 Control 类还提供了两个厲性来定义控件外 
观，分别是 HorizontalContentAlignment 和 VerticalContentA 1 ignmento 

Control 的派生类往往还会定义额外的属忭和事件。控件通常会处理来指针设备、鼠 
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标、触控笔和键盘的用户输入，并将其转换为史高级的事件。例如， BiUtonBase 类(所有按 
钮的祸类)定义， Click 亊件, Slider 定义了用通知其 Value 厲性发生改变的 ValueChanged 
事件， TextBox 定义/用于通知其 Text 属性发生改变的 TextChanged 事件。 

在实践当中， Control 的派生类更多用来与用户交互，正如本章标题所要表达的。为了 
更方便地获取用户输入， Control 提供了受保护的虛方法，这些虚方法与 UlElemem 定义的 
用户输入饵件-一对应。例如，对应 T UlElement 定义的 Tapped 事件， Control 定义了受 
保护的虚方法 OnTapped 。 Control 还定义了丨 sEnabled 厲性，可以在控件不适用的情况下停 
止接收用户输入，该属性在改变时会引发 IsEnabledChanged 車件，它是 Control 定义的唯一 
的公共事件。 

Windows 8中也有“输入焦点” (input focus ) 的概念。在控件获得输入焦点后，用户希 
槊该控件能够收到大多数键盘車件。（有些键盘事件与输入焦点无关，如 Windows 键。）为 
此 ， Control 定义 / Focus 方法以及廉方法 OnGotFocus 和 OnLostFocus 。 

有一个勹输入焦点相关的功能，即通过 Tab 键在不同控件间切换焦点。 Control 通过 
IsTabStop、Tab Index fll TabNavigation 属性使该功能成为可能。 

Windows . Ul . Xaml.Controls 命名空间中有许多 Control 的派生类， 
Windows . UI . Xaml . Controls . Primitives 命名中间屮也有几个。后一个命名空 N 中的控件用丁 • 
构建其他控件，但这只是一种建议，并非约束。 

Control 的大多数派生类都肓接派生自 Control , 但有4个较为重要的 Control 派生类建 
立了自己的类别。这些类的关系如下所示。 

Object 

DependencyObject 

UIElement 

FrameworkElement 

Control 

ContentControl 
ItemsControl 
Range Base 
UserControl 

很多歌要的类(如 Button 、 ScrollViewer 和 AppBar ) 派生 ContentControl ，但 
ContentControl 类只+过定义了一个名为 Content 的属性，其类型为 object , 例如，若要改 
变 Button 外观，吋以通过 Content 属性进行设置，一般吋将其设置为文本或图片，但也 " J — 
以设胥为包含其他内容的面板。 

注意， ContentControl 的 Content 属性的类型为 object , 而非 UIElement 。 这样设 i |. 小无 
道现。我们几乎 " J " 以将任何类甩的对象作为 Button 的内容，甚半: " J •以通过模板 (" j + 视树的形 
式)来告知 Button 如何显示其内容。我们对于 Button 不常用到模板,而对于 ItemsControl 
的派生类却经常用到。第11章会介绍如何定义内容模板。 

ItemsControl 的派牛类用于•项 1 1柒合，其中包括常见的 ListBox 和 ComboBox 以及 
Windows 8新控件 FlipView、GridView 和 ListView 。 第 11 章会一并介绍。 

创建自定义控件的方式有很多种。最简中的是定义控件的 Style , 但较复杂的外观盅耍 



ffl 到模板。在某些情况 K , 我们可以从现有控件派生新控件，并为其添加额外的功 能：如 
采 ContentControl 或 ItemsControl 提供了所的功能，也可以考虑从这两个类派十.。 

创逑定义控件 M 常见的方法是从 UserControl 派牛:。虽然这种方法不适合实现作为商 
、 lk 产品的岛定义控件库，但在应用程序中使用这种技术却不失为一种好的选择。 

5.2 用于设置范围的 Slider 控件 

前文肢示的 Control 相关类的继承 S 次结构中还有一个軍要的类没有介绍，它就是 
RangeBase u 该炎有3个派生类： ProgressBar、ScrollBar 和 Slider 。 

这3个类中哪个 M 为独特？敁然是 ProgressBar 。 ProgressBar 只用到了 RangeBase 的几 
个属性： Minimum 、 Maximum 、 SmallChange、LargeChange 和 Value。RangeBase 的 Value 
诚性 的类 喂为 double . 取值范 |制 通过 Minimum ( ift 小值) 和 Maximum ( iii 大值) 属性來设背 _。 
ScrollBar 和 Slider 的 Value 厲性会在用户操纵控件时发牛:变化，而 ProgressBar 的 Value 属 
性志耍程序设胃 .， 从而提术用户耗时操作的进度。 

ProgressBar 有一种非确定性模式。在该模式下， ProgressBar 会表现为一串依次穿越屏 
g •的 点。 ProgrcssRing 与之类似，只不过点会被限制在圆环中。 

/li Windows 约25个年头的演变中 ， ScrollBar 一度在控件库中占据重要地位，如今却 
只能 A ScrollViewer 控件中见 到了。 中.独实例化 Windows Runtime 版本的 ScrollBar 界面上 
小会显水任何内容。我们必须为其提供模板。与 RangeBase 一样， ScrollBar 也定义在 
Windows . UI . Xaml . Controls . Primitives 命名空间中， 表水该 控件并+是供应用程序开发者平 
时使用的。 

对丁几 乎所有选择数值范 IS 的需求， ScrollBar 均已被 Slider 取代。由于具有支持触換 
屛的界 Ifli , Slider 变得史好用。 Slider 在默认 Pk ! 背 F 是没有箭头的。在触換 Slider 或滑动手 
指/鼠标到某一点时，该控件会 II •算出该点所对应的值。 

以编程方式或通过用户操作都吋以修改 Slider 的 Value 诚性。要想在 Value 厲性变化 
时获得通知， "1 以订阅 ValueChanged 卞件 (IF. 如 i 例项丨丨 SliderEvents 所展的)。 


项 H: SliderEvents I 文件 ： Main Page, xaml (片段 } 



《Slider ValueChanged="OnSliderValueChanged" /> 



</StackPanel> 


这 W 的两个 Slidei •控件共用一个屯件处理程序。这个示例的功能很简单，即将毎个 
Slider 的当前状态记示在各自下面的 TextBlock 中。若不为这些控件分配名称，实现起来就 
吋能有*难度。为找到 H 标元素.琪件处理程序有两个 假设： 一是 Slider 的父元柰是 Panel: 

_ .是在同一个 Panel 中， Slider 的 F— 个子元素为 TextBlock。 





这 m 用到 / 多种访问叫视树中元素的方法，这能让人觉得有些复杂。圾后一步. 
TextBlock 的 Text 属性被设置为事件参数的 NewValue 值(需要转换为字符串)。这一步也口 J " 
以使用 Slider 的 Value M 性。 

txtblk.Text ■ slider.Value.ToString(); 


虽然 RangeBaseValueChangedEventArgs 派生自 RoutedEvent ， 但 ValueChanged 并不是 
路 rtl 事件。 该事件 不 会沿可视树从分支传播到 主干。 参数 sender 引用的总是 Slider 对象， 
而该事件的 OriginalSource 属性总是 null 。 

运行该程序后会发现， TextBlock 元素®初什么 都+敁 示。在 Value 属性从 0( 默 认伉) 
变为其他值之前， ValueChanged 事件是不会被引发的。 

在触摸或用鼠标中.击 Slider 的某个位 腎时， Value 属性会 g 接变为该位置所对应的值。 
町以用手指或鼠标指针拖动滑块来改变 Slider 的值。在操作 Slider 的过程中，我们会看到 
被选定的值在0到100之间变化(如下图所示)。 



这个范_是 Minimum 和 Maximum 屈性的默认值决定的， S 小值和 最大値 分别为0和 
100. 虽然 Value 属性为 double 类型，但由于 StepFrequency 属性的默认值为1,因而最终 
的 Value 总是粮数。 

默认情况 K , Slider 是横向 M 示的。我们可以通过 Orientation 属性将其更改为纵向的。 
Slider 的宽度+能 M 过设 S 属性来史改，而只能使用模板来敢新定义。该控件的布局宽度要 
比视宽度大一些。从布局角度讲，横向 Slider 的默认岛度为60像索，纵向 Slider 的默认 
宽度为45 像素： 从使用角度讲，这种尺十设 il •足以消除触換误差所带来的影响。 

程序运行时按 Tab 键可以更改键盘的输入焦点，在两个 Slider 间切换，然后 uj ■以使用 
方向键修改选定的值。按 Home 和 End 键 " J •以分别将值调辛:最小和大。 

下面要介绍的示例项 U SliderBindings 是匕一示例的另一种形式，即所有更新逻辑从代 
码隐藏文件被转移至 XAMLo StackPanel 中有3个 Slider 控件，毎个 Slider 下血 _ 都有一个 
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TextBlock 元索。针对 TextBIock 的隐式样式吋以避免过多的标记重复。 

项 SliderBindings I 义件： Main Page, xaml (片段 > 

<Grid Background-"(StaticResource ApplicationPageBackgroundThemeBrush}"> 
<Grid.Resources 〉 

〈Style TargetType="TextBlock M > 

〈Setter Property=*"FontSize" Value="48" /> 

<Setter Property="HorizontalAlignment" Value= M Center" /> 
</Style> 

</Grid.Resources> 



〈TextBlock Text="{Binding EleraentName=sliderl, Path=Value)" /> 



IsDirectionReversed="True" 

StepFrequency="0.01" /> 

〈TextBlock Text="{Binding ElementName=slider2, Path*Value)" /> 



StepFrequency« ,, 0.01 M 
SmallChange="0.01 M 
LargeChange»"0.1" /> 

〈TextBlock Text*"{Binding ElementName=slider3, Path=Value}" /> 



数据绑定主动获取源屈性的初始值，而不会等待某些事件(如 ValueChanged ) o 在用户 
操作 Slider 的过程中，数据绑定能够跟踪值的变化(参见卜图>。 



第：个 Slider 的 StepFrequency _性被设符为 0.01. IsDirectionReversed 屈性被设 S 为 
true , 因而滑块在 ig 右端时 Slider 的值为最小（岑）。实践当中，横向 Slider 的 
IsDirectionReversed 很少被 设腎为 true , 该设宵史适合纵向的 Slider 。 默认情况 K , 纵向 Slider 
在滑块位 r ® 卜端 时值为 s 小，但在某些情况下我们希筚值为最大。 

若用键盘方向键操作第.个 Slider , 我们会发现其步 K ; 为1，而非 StepFrequency 所设 
常的0.01。键盘操作的步长由 SmallChangeM 性控制，其默认值为1。 

第二个 Slider 的范围从 -1 到丨。该 Slider 显示之初，滑块位丁正中央，默认值为0。 
StepFrequency 和 SmallChange 属性 均为 0.01, LargeChange 厲性为 0.1 ,但 U 前尚未 发现迎 
过鼠标或键盘以 LargeChange 设 靑触发 跳跃的方法。 
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Slider 还定义了 TickFrequency 和 TickPlaccment 属性用于显示刻度。如果设置 Slider 
的 Background 和 Foreground 属性， Slider 会将 Foreground 用作滑 道最小 值一侧的颜色，将 
Background 用作消道最大值一侧的颜色，但在鼠标悬停或操作过程中， Slider 会早.现默认 
颜色。 

在本15创建史多 Slider 之前,有必要优化一卜其布局。下曲让我们进一步认识一下 Grid . 


5.3 关于 Grid 

您或许已对 Grid 司空见惯了，因为本 It ； 几 1 F 毎个尔例都有它的身影。虽然如此，但不 
对它的介绍并不深入。木书后面的许多小•例不会使用中格模式的 Grid . 而会为其添加行 
和列。 

Grid 与 HTML 中的 table 有许多共通之处，但不尽相冋。对 P Grid , 我们+能中独定 
义毎个单元格的边框和边距。 Grid 只用于布局。任何敁示效果都取决于其父元桌或子元素。 
例如， Grid 可以包含在 Border 中，而 Border 也可以作为 Grid 单元格的内容。 

Grid 的行数和列数必须显式指定，无法通过子元#的数最自动确定。 Grid 的每个子儿 
素可以属于指定的某个中.元格(行和列的交汇处)，也 iif 以跨越多行和多列， 

M 然我们能够以编程方式在运行时修改行数和列数，但在实践中很少这柞做。在大多 
数情况下，我们都是在 XAML 文件中定义固定的行数和列数。定义行和列耑要将 
RowDefinition 和 ColumnDefinition 对象分别添加到 Grid 的 RowDefinitions 和 
ColumnDefmitions 集 合中。 

行和列的宽度通过以卜 ' 3种方式 指定： 

• 以像素值的形式 M 式指定行和列的宽度 

• Auto . 由子元素的尺寸决定 

• 星号 (*>, 按比例分配剩余空间 

在 XAML 中， u 了以使用“属性元素语法”来填充 RowDefinitions 和 ColumnDefinitions 
集合(如下所示)。 

<Grid> 

<Grid•RowDefinitions> 

<RowDefinition Height="Auto" /> 

〈RowDefinition Height="55" /> 

<RowDefinition Height= … /> 

</Grid.RowDefinitions> 


<ColumnDefinition Width="Auto" 
<ColumnDefinition Width:"10*" 
<ColumnDefinition Width="20*" 
<ColumnDefinition Width="Auto** 
</Grid.ColumnDefinitions 〉 


:! -- Children 


iff 注意， Grid 集合厲性的名称 RowDefinitions 和 ColumnDefinitions 力复数，而对象的 
类型名 RowDefinition 和 ColumnDefinition 为单数。若不设置 RowDefinitions , Grid 贝 lj 为单 



行：若不设 l S ColumnDefinitions ， 则力中-列。 

上述标记通过3种方式定义了 3行4列的 Grid 。 纯数字表示按像索设 E 宽度(或高度>。 
这种将行高或列宽设 S 为具体数值的方式不如 另外两 种方式 常用。 

Auto 设 S 会使 Grid 根据子元燊决定具体尺十。计算得出的行尚(或列宽)取决于该行 (列） 
中最卨 (宽) 的子元素。 

与 HTML 类似，星号会使 Grid 自动分配剩余 mJ •用空间。对于前文定义的 Grid , 第三 
行的卨度是通过将 Grid 的总高度减去第一行和第行的卨度计算得出。第二列和第7列的 
宽度为 Grid 的总宽度减去第一列和第四列的宽度。星号前面的数字为 权值。 也就是说，第 
三列的宽度是第二列宽度的两倍。 

需要注意的是，仅当 Grid 为父驱动时星号才适用。举例来说，若将上述 Grid 作为纵 
向 StackPanel 的子元素， StackPanel 就会为 Grid 分配逻辑 I 〔无限的高度。那么 Grid 如何为 
中间一行分 fli ! 无限的高度呢？这是不会发 生的。 在这种情况 K ， 星号会按 Auto 设置进行 
处理。 

类似地，若将 Grid 作为 Canvas 的子元索， H . 不显式设 S Grid 的 Height 和 Width 屈性， 
那么所有星号部会按 Auto 设进行处理。将 HorizontalAlignment 和 VerticalAlignment 域性 
改为非默认值时，这种情况也会发生。对 r 前文展术的 Grid , 由 r •子元素的原因，第二列 
nj 能比第 三列还 要宽。 

然而，如果没有 RowDefmition 对象使用星号设背， Grid 的卨度就由子元素驱动。我们 
可以将这样的 Grid 置于 Canvas 或纵向的 StackPanel 中，也■以修改 VerticalAlignment , 这 
样做部不会发生莫名其妙的问题。 

RowDefinition 的 Height 厲性和 ColumnDefinition 的 Width 属性的类型均为 GridLength 。 
该类喟为 Windows . UI . Xaml 命名空间中定义的结构。我们吋以通过它在代码中通过 Auto 
或星 ] ■來指定尺十 。 RowDefinition 还 定义了 MinHeight 和 MaxHeight 属性 ， ColumnDefinition 
也相应地定义/ MinWidth 和 MaxWidth 属性。这些屈性的类甩均为 double , 用 : T 以像素为 
中-位 设背最 小或最 大尺、通过 RowDefinition 的 ActualHeight 属性和 ColumnDefinition 的 
Actua I Width ® 性可以获得行和列的实际尺寸。 

Grid 还定义了 4个可以在子元素 h 设置的附加 属性： Grid.Row III Grid . Column 的默认 
值为 0, Grid . RowSpan 和 Grid . ColumnSpan 的默认值为 h 我们可以通过前两个属性来指定 
子元素所从属的中-元格以及子元桌所跨越的行列数。一个单元格吋以容纳多个元素。 

Grid 叶以在中.元格屮嵌袞其他 Grid 和面板， 但嵌 套面板 uj ■能会降低布局 效果。 如果深 
崧嵌您的元尜在动 lIBi 过程中改变自身尺、】•， 或者子 元素被频繁添加辛: Children 集合，或者 
从中移除，则要特别注意。应尽设避免以敁示器刷新频率来小断 il - 算布局！ 

匕发表的第--篇有关 Windows 编程的文章介绍了一个名为 WHATSIZE 的程序。本书 
第3蓓展示 r 一个 Windows 8版本的 WHATSIZE 。 第3篇介绍 Windows 编程的文章发表 
J " 1987年5门的 Microsoft Systems Journal 。 该文章展>〗;_ 了一个名为 COLORSCR(color scroll ) 
的程序。该程序在 Windows 2 beta 版屮的运行效果如卜图所示。 
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三个滚动条分别对应红绿蓝三色，程序界心侧是这三种颜色混 合后的颜色。 当时的 
显示设备无法 M 示全彩色。对于设备无法呈现的颜色，则会采用抖动 ( dithering ) 方式敁示。 
三种色值会分别 M 示在三个滚动条的下面。此程序采用了动态布局方式(计算贵较大)，滚 
动条的宽度会随窗口尺寸的改变而改变。 

Grid 非常适合用来实现这种布局。示例项 U SimpleCoiorScroll 中有6个 TextBlock 和3 
个 Slider 。 为便于样式设 S , XAML 文件定义了两种隐式样式。 

项目： SimpleCoiorScroll I 文件： MainPage.xaml ( 片段） 

<Page.Resources > 

<Style TargetType="TextBlock"> 

<Setter Property="Text" Value="00 n /> 

<Setter Property-"FontSize" Value- M 24 M /> 

<Setter Property®"Horizonta1A1ignment" Value="Center" /> 

<Setter Property="Margin" Value="0 12" /> 

</Style> 


<Style TargetType="Slider H > 

<Setter Property "Orientation" Value*= "Vertical" /> 

<Setter Property="IsDirectionReversed" Value="True" /> 

<Setter Property**"Maximum" Value 二 "255" /> 

〈Setter Property="HorizontalAlignment*' Value=’’Center" /> 

</Style> 

</Page.Resources 〉 

色值最好以卜六进制1|]^,因而 TextBlock 的 Style 将 Text 厲性初始化为 “00”，对应 
Slider 在最小值 位置的 十六进制值。 

Grid 具有三行四列。这三行分别用于容纳 Slider 和上下两个 TextBlock 。 请注意,左侧 
连续的三列均是一倍宽.而第四列为三倍宽。 

项 R: SimpleCoiorScroll | 义件： MainPage.xaml ( 片段 } 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrushJ"> 



<ColumnDefinition Width®"*" /> 



<ColumnDefinition Width="* n /> 
<ColumnDefinition Width="3*" /> 


</Grid.ColumnDefinitions> 

<Grid.RowDefinitions> 

〈RowDefinition Height-"Aut。" /> 
<RowDefinition Height®"*" /> 
<RowDefinition Heighf"Auto" /> 
</Grid.RowDefinitions> 
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这个 XAML 文件其余的标记为 Grid 实例化10个子元索并且都设置了附加属性 
Grid . Row 和 Grid.Column (里然设置为0是不必要 的)。 在指定 Grid 子元素特性时，本人倾 
向于将能够快速识别元素的特性(如 Name 或 Text ) 放在首位，后面跟附加属性。 

项月 ： SimpleColorScroll I 文件： MainPage.xaml ( 片段） 

<Grid Background:" (StaticResource ApplicationPageBackgroundThemeBxrush) ,, > 



<TextBlock Text="Red" 

Grid.Column-"。" 

Grid.Row=* , 0" 

Foreground-"Red" /> 

《Slider Name="redS1ider" 

Grid.Column="0" 

Grid.Row="l" 

Foreground="Red" 

ValueChanged="OnSliderValueChanged" /> 

<TextBlock Name="redValue M 
Gr id • Column:" 0 •• 

Grid.Row=”2” 

Foreground="Red" /> 

<!-- Green ■- > 

<TextBlock Text="Green" 

Grid.Column= M l" 

Grid.Row="0" 

Foreground="Green" /> 

<Slider Name="greenSlider" 

Gr id • Co 1 umn=•• 1 •• 

Grid.Row="l" 

Foreground= M Green" 

ValueChanged»"OnSliderValueChanged" /> 

<TextBlock Name="greenValue" 

Grid.Column*"1" 

Grid.Row= M 2" 

Foreground="Green" /> 

<! 一 Blue --> 

<TextBlock Text="Blue" 

Grid.Column="2" 

Grid.RoW'O" 

Foreground="Blue" /> 

〈Slider Name="blueSlider" 

Grid.Colunrn="2" 

Grid•Row-"1" 

Foreground="Blue" 

ValueChanged="OnSliderValueChanged" /> 

<TextBlock Name="blueValue" 

Gr id • Co 1 umn* •• 2 ” 

Grid.Row-"2" 

Foreground= w Blue" /> 


<! •- Result — > 

〈Rectangle Grid.Column:"3" 

Grid.Row="0" 

Grid•RowSpan="3”> 

〈 Rectangle.Fill> 

<SolidColorBrush x:Name="brushResult" 




每组 TextBlock 和 Slider 元索的 Foreground 属性被设置为各自所代衣的颜色。 

Grid 成部的 Rectangle 有一个附加属性 Grid.RowSpan, 值为 3 表 A 该元#•志耍跨_:行。 
SolidColorBrush 被设置为 Black, 该颜色正是飞个 Slider 初始值所对应的颜色。除了在 XAML 
文件中进行初始化，也 uj •使用代码隐藏类的构造函数(或 Loaded If 件)来完成此任务。 

三个 Slider 控件共用代码隐藏文件中的同一个 ValueChanged 事件处理程序。 

项 R: SimpleColorScroll I 文件： MainPage.xaml .cs ( 片段） 
public sealed partial class MainPage : Page 

i 

public MainPage() 



这个程序本 "J ■以通过对 sender 参数进行类型转换来获得实际引发件的 Slider 控件，并 
通过 RangeBaseValueChangedEventArgs 对象获取新选定的值。似不论哪个 Slider 的值发 
变化，此处理程序都需要根据三个选定的值來屯新创逑 Color 值。这段代码唯 j 显得 复的 
操作是在任意 Slider 发生变化时都要设置 3 个文本。但为解决这个问题，需耍找到引发事 
件的 Slider 所对应的 TextBlock o 就中.纯演示 Slider 控件而肓，这样做似 f •有些喷宾夺主。 
如图所示，此程序可合成 16 777 216 种颜色。 
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5.4 屏幕方向与比例 

如果在 f 板电脑I .运行 SimpleColorScroll 并转动屏沾 使其切 换至纵向视图，布局则会 
敁衍拥挤小堪。而在横向视阁卜将程序切换免辅屏视图会导致文木标签的帘抒。力解决此 
类 H 题，我们吋以在代码隐藏义件中添加•叫逻辑，以便根据敁示方向和比例来调幣布局。 

对 r 这个特定的程序.为方便布局的调整. 吋以 将原来的 Grid —分为二，使两荞能够 
嵌套。内层的 Grid 有三行三列，用于容纳 TextBlock 元索和 Slider 控件。外层 Grid 包含两 
个子元素,分别为 Grid 和 Rectangle。 在横向视图卜' 外层 Grid 只有 两列; 而在纵向视图 
K. 它只有两行。 

4例项I」 OrientableColorScroll 延续 J* SimpleColorScroll 项 U ./ii XAML 中的 Style 定义。 
外层 Grid 的标记如 卜 所示。 

项 fl: OrientableColorScroll | 文件： MainPage. xaml (iV©> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
SizeChanged="OnGridSizeChanged"> 

<Grid.ColumnDefinitions> 

<ColamnDefinition Widch="*" /> 

<ColumnDefinition x:Name= M secondColDef" Width="*" /> 

</Grid.ColumnDefinitions 〉 



</Grid.RowDefinitions> 


〈Grid Grid.Row= ,, 0" 

Grid.Column="0"> 



<!-- Result —— > 

<Rectangle Name="rectangleResult 



<SolidColorBrush x : Name="brushResult" 
Color*="Biack" /> 

〈 /Rectangle.Fill 〉 



外层 Grid 的 RowDefinitions 和 ColumnDefinitions 存两种初始化方式:―两行-列和一行 
两列。毎个集合的第：个元 系均被 命名，以便作:代码中访 H 它们。这个程序假定在初始状 
态 卜为 横叫视图， W 而第二行的高度被设筲力0。 

内层的 Grid (包含 TextBlock 允蒺和 Slider 控件)总是位丁•第一列或第一行。 

<Grid Grid.Row="0" 

Grid.Column="0"> 
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在 Grid 上设贸 Grid . Row 和 Grid . Column 特性可能让人觉得有些困惑。该设 H 并非针对 
当前 Grid , 而是用于设置其在父 Grid 中所处的行和列。这两个附加属性的默认值均为0, 
闵而实际并不需要 M 式地设置这两个 特性。 

在初始状态下， Rectangle 元素位丁-第一行第二列。 

<Rectangle Name= w rectangleResult M 
Grid.Column="l" 

Grid.Row="0"> 



在本示例的第一个版木中， Rectangle 被命了名，因而这两个附加属性可以在代码隐藏 
文件中修改。该操作可以在外层 Grid 的 SizeChanged 事件处理程序中完成。 

项目： OrientableColorScroll I 文件： MainPage.xaml.cs ( 片段） 

void OnGridSizeChanged(object sender. SizeChangedEventArgs args) 

( 

// Landscape mode 

if (args.NewSize.Width > args.NewSize.Height) 

{ 

secondColDef.Width = new GridLength(1, GridUnicType.Star); 
secondRowDef.Height = new GridLength (0) ; 

Grid.SetColumn(rectangleResult, 1); 

Grid.SetRow(rectangleResult, 0); 

\ 

// Portrait mode 
else 
( 

secondColDef.Width = new GridLength(0); 

secondRowDef.Height = new GridLength(1, GridUnitType.Star); 

Grid.SeCColumn(rectangleResult, 0); 

Grid.SetRow(rectangleResult, 1); 

} 

) 

这段代码修改了外层 Grid 的 RowDefinition 和 CoIumnDefinition . 另外还有 Rectangle 
元素所处的中.元格。这样， Rectangle 元素便能够在横向视图下被 置于第-行第 1列，而在 
纵向视图卜被1! T 第二行第一列。 

该程序的运行效果如 F 图所示。 
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第12章会进一步讨论针对辅屏视图布局的 调整。 

5.5 Slider 与格式化字符串转换器 

对于前文介绍的两个 ColorScroll 程序，底部的 TextBlock 标签能够以十六进制显示 
Slider 的值。我们不仅可以在代码隐藏文件中设置这些标签的值，还可以通过数据绑定将 
Slider 的值传给 TextBlock 。 后一种方法只需要写一个转换器，将 double 类型转换为双字符 
的十六进制字 符串。 

第4章在示例项目 WhatSizeWithBindingConverter 中介绍了 一 个名为 
FormattedStringConverter 的类，但此转换器在这 取并不 适用。读者不妨试一下，但最终会 
发现格式字符串 “ X 2” 只能在整数类型上使用，而 Slider 的 Value 属性为 double 。 

有时我们可以编写一些简申-实用的绑定转换器来达到一举多得的效果(正如下一节要 
介绍 的)。 


5.6 工具提示与转换 

在 ColorScroll 程序中操纵 Slider 控件时，您或许会发现 Slider 会给出一个能够 M 示当 
前值的 T 具提说 tooltip )。 这个功能虽然非常不错，但它 S 示的是 I •进制数，与标签的十六 
进制数在形式上不一致。 

如果觉得 Slider 同时显示十进制和十六进制值无伤大雅，则可直接跳过木节 。倘若希 
望工具提示与标签的内容相同（十六进制 值） .则可利用 Slider 定义的 
ThumbToolTipValueConverter 厲性。 我们叫 以通过该属性指定用于格式化文本的对象。该 
对象的类甩必须实现 IValueConverter 接口，该接口也是实现绑定转换器所要实现的接口。 

志耍注意的是， 设置到 ThumbToolTipValueConverter 属性的转换器小能像数据绑定转 
换器那样复杂，因为无法指定转换参数。好处是，这种转换器只针对特定情况，实现起来 
较为简单。 

水例项 II ColorScrollWithValueConverter 定义了转换器， t 门用丁•将 double 值转换为 

双字符十六进制字符串。这个类十分简单，甚至类名和实现代码都差不多长。 

项 ColorScrollWithValueConverter I 义件： DoubleToStringHexByteConverter.es 
using System; 

using Windows.UI.Xaml.Data; 
namespace ColorScrollWithValueConverter 


public class DoubleToStringHexByteConverter : IValueConverter 
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这个转换器不仅适用 P Slider 的工具提示，也适用亍用来显示 Slider 值的 TextBlocko 
下面这个版本的 ColorScroll 程序展示了该转换器的使用。（为了使程序简单明了，该示例并 
未调整显示比例。 ） 转换器是在 XAML 文件的 Resources 区段中实例化的。 

项目： ColorScrollWithValueConverter | 文件： MainPage.xaml 《片 段） 

<Page.Resources> 

<local : DoubleToStringHexByteConverter x : Key="hexConverter w /> 

</Page.Resources 〉 

下面这段标记 展示了 第一组 TextBlock 和 Slider 。 Slider 通过简单的 StaticResource 来引 
用 hexConverter 资源，而 TextBlock 则通过 Binding 引用该资源(为了便于阅读，纟邦定代码 
被拆分为三行)。 

项 FI: ColorScrollWithValueConverter I 文件： MainPage.xaml( 片段〉 

<! -- Red -- > 

<TextBlock Text-"Red" 

Grid.Column="0" 

Grid.Row="0" 

Foreground-"Red" /> 

<Slider Name«"redSlider" 

Grid.Column="0" 

Grid.Row="l" 

ThumbToolTipValueConverter-"{StaticResource hexConverterI" 

Foreground 。 "Red" 

ValueChanged="OnSliderValueChanged" /> 

<TextBlock Text="{Binding ElementName=redSlider, 

Path=Value, 

Converter={StaticResource hexConverter}}" 

Grid. Column-"O'* 

Grid.Row="2 M 

Foreground="Red" /> 

由于 ValueChanged 事件处理程序不再需要更新 TextBlock 标签，这甩已将相关代码移 
除，只保留计算合成颜色的部分。 

项 ColorScrollWithValueConverter I 文件： MainPage.xaml.cs (片段 > 

void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs args) 

( 

byte r = (byte)redSlider.Value; 
byte g = (byte)greenSlider.Value; 
byte b = (byte)blueSlider.Value; 

brushResult.Color ■ Color.FromArgb(255, r, q, b); 

» 

我们也吋以将每个 Slider 标签中的 ThumbToolTipValueConverter 设置转移至针对 Slider 
的 样式。 

<Style TargetType="Slider"> 

<Setter Property»"Orientation" Value="Vertical" /> 

<Setter Property*"IsDirectionReversed" Value="True" /> 

<Setter Property= M Maximum" Value*"255" /> 

<Setter Property="HorizontalAlignment" Value="Center" /> 

<Setter Property="ThumbToolTipValueConverter" Value="{StaticResource hexConverter)" /> 
</Style> 

hJ •否进一步利用数据绑定来彻底剔除 ValueChanged 事件处理程序呢？若能够将儿个 
Slider 绑定到 Color 的相应属性 k , 这便是可行的。 
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〈Rectangle Grid.Column="3" 

Grid.Row-"0" 

Grid.RowSpan="3"> 
〈 Rectangle.Fill> 

<SolidColorBrush> 

<SolidColorBrush.Color> 



R="(Binding ElementName=redSlider, Path=Value)" 

G-"{Binding ElementNaine=greenSlider, Path=Value}" 

B="{Binding ElementName=blueSlicler, Path=Value)" /> 
</SolidColorBrush.Color> 

</SolidColorBrush> 

</Rectangle.Fill> 

</Rectangle> 

这段标记最大的问题在于，绑定目标必须是依赖属性，但 Color 的这些属性不是。依 
赖厲性只能在 DependencyObject 的派牛.类中实现，但 Color 根本就不是类，而是结构。 

SolidColorBmsh 的 Coloi •厲性是依赖属性，可以作为绑定 H 标。然而，对于这个程序， 
Color M 性需耍通过十:个值 H •算得出，而 Windows Runtime 不支持多绑定源的数据绑定。 

—种解决方案是创建一个能够根据红绿蓝色值创建 Color 对象的类。第6章会具体介 
绍这种方法。 


5.7 用 Slider 绘制草图 

木人+打算在这里展示下面这个示例的截图。这个水例项目名为 SliderSketch , 它用 
Slider 实现了一个大约50年前 就已经 问世的程序。 用户 耑要分别通过横向和纵向的 Slider 
来操控一个概念上的笔尖来逐步延伸一条连续的多段线。之所以+展氺它的屏幕截图，是 
因为此程序甚是难用，本人实在难以绘制出一幅像样的图案。 

此程序的 XAML 文件定义了一个两行两列的 Grid 。 屏幕的绝大部分区域被其中的一个 
较大的中•元格所占据。该中-元格包含一个 Border 和一个 Polyline 。 纵向的 Slider 位丁左 
侧，横向的 Slider 位于最 底端。 左下角的单元格为空。 

项 SliderSketch I 文件： MainPage.xaml (片段 } 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 



<RowDefinition Height="* H /> 
<RowDefinition Height*"Auto" /> 



<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width="*" /> 

</Grid.ColumnDefinitions> 

<Slider Name="ySlider" 

Grid.Row="0" 

Gr id.Column="0" 

Orientation-"Vertical" 
IsDirectionReversed="True" 

Margin="0 18" 

ValueChanged="OnSliderValueChanged" /> 
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〈Border Grid.Row="0" 



BorderBrush="IStaticResource ApplicationForegroundThemeBrush} 
BorderThickness="3 0 0 3" 

Background:"#C0C0C0 M 
Padding= ,, 24" 

SizeCha nged=" OnBo rde rSi zeChanged > 


<Polyline Name="polyline" 
Stroke="#404040 n 



将 Grid 最外侧行和列的宽度设置为 Auto 而通过星号使内部区域占据绝大部分空间， 
这是较为常见的 做法。 这样，边缘的内容会自动贴靠。虽然 Windows 8没有 DockPanel . 
但可以通过 Grid 来模拟。 

Slider 控件的 Margin 属性是根据经验來设 贾的。 为使程序正确工作， Slider 值的范_ 
应 1 j 代表笔尖的像素的最大和最小坐标值一致， Slider 滑块的位置应尽最保持 1 j 该像素对 
齐。毎当 M 示区域的大小发生改变， Slider 的 Minimum 和 Maximum 值就都需要重新 il •算。 

项 SliderSketch 丨 文件《 MainPage .xaml .cs ( 片段） 
public sealed partial class MainPage : Page 
( 

public MainPage() 



void OnBorderSizeChanged(object sender, SizeChangedEventArgs args) 



xSlider.Maximum = args.NewSize.Width - border.Padding.Left 

- border.Padding.Right 
- polyline.StrokeThickness; 

ySlider.Maximum = args.NewSize.Height - border.Padding.Top 

- border.Padding.Bottom 
- polyline.StrokeThickness; 

) 

void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs args) 

( 

polyline.Points.Add(new Point(xSlider.Value, ySlider.Value)); 


实现“绘制”功能的方法实际只有一行，位丁•这段代码底部。作用是将新建的 Point 
添加到 Polyline 。 

i # +要尝试通过翻转或摇晃平板电脑来 重賈图 画，因为这个功能尚未实现。 
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5.8 按钮的几种变体 

Windows Runtime 支持多种按钮，它们都派生自 Button Base 类。 
Object 

DependencyObject 

UIElement 

F rame workE lement 
Control 

ContentControl 

ButtonBase 

Button 

HyperlinkButton . 

RepeatButton 

ToggleButton 

CheckBox 

RadioButton 

示例项 IJ ButtonVarieties 展示了这些按钮的默认外观。 

项月： ButtonVarieties | 文件： MainPage.xaml ( 片段） 

<Grid Background 3 "|StaticResource ApplicationPageBackgroundThemeBrush)"> 
<StackPanel> 

<Button Content="Just a plain old Button" /> 

〈HyperlinkButton Content="Hyper1inkButton" /> 

<RepeatButton Content="RepeatButton" /> 

<ToggleButton Content®"ToggleButton" /> 

<CheckBox Content= M CheckBox M /> 

<RadioButton Content*"RadioButton #1" /> 

<RadioButton>RadioButton #2</RadioButton> 

<RadioButton> 



RadioButton #3 


</RadioButton.Content> 

</RadioButton> 



<RadioButton.Content> 

<TexcBlock Text= M RadioButton I4" /> 

</RadioButton.Content> 

〈 /RadioButton 〉 

<ToggleSwitch /> 

</StackPanel> 

</Grid> 

此程序创建了 4 个 RadioButton 的实例(参见下 图)。 M 然不同实例设 S Content 厲性的 
方式不同，但是它们彼此之间是等价的。 



如采觉得这吟按钮的外观+合适，吋以 M 过 ControlTemplate 彻底改变(洋情参见第 
11 章)。 

所有 FrameworkElement 派 'k 类一样，这鵠按钮的 HorizontalAlignmenl 和 
VerticalAlignment M 性的默认值均力 Stretch fli/H 按钮加战之初 ， Horizontal Alignment 1;4性 
' J-j Left . VerticalAlignment 性为 Center，Padding 属 fl .: lli 小为 0.. M 然 Margin 诚性值为0, 
但 Border 外侧仍有较窄的边距。 

ButtonBase 定义了 Click 卞件， 能在 手指、鼠标、触控笔按控件并释放时引发。该行为 
» J '以通过 ClickMode 诚性史改。另外， 柷序 iij 以 M 过一种命令接 U 作按钮被中.击时 进行通 
知，详情参见第6章。 

Button 是传统的按钮 。 HyperlinkButlon 'j Button 极为相似，过 HyperlinkButton 的 
外观 是巾另 •种投板定 义的。 RepeatBunon 能够在按钮 被按卜 并保持一段后引发一系列 
Click 事件，通常用 F 实现 ScrollBar 的重复行为。 

中-击 ToggleButtpn 能够 使其在 “幵”和“关”两种状态之间进行切换。前而的屏辂截 
图展示了该控件“开”的状态。 CheckBox 未定义仟何公共成员，它 M 不过继承 f 
ToggleButton 的所有功能，并通过模板改了外观。 

ToggleButton 通过 IsChecked 域性来衣叫其3前状态。该控件还定义 J * Checked 和 
Unchecked UHT •来通知其状态的变化。这两个 ‘ jf 件一般部需要订阅，但叮以共用冋•个处 
理程序。 

ToggleButton 的 IsChecked 属性并不是 bool 类型，而是 Nullable < bool >^ H 这说明该 
属性可以返回 null 。 开关按钮的这种“中间”状态可能会让人不解。不妨通过-个例子来 
说明:字处理程序通常会有用 P 设置“加粗” （ Bold ) 的 CheckBox 。 如果被选中的文本 l ! 被 
加粗，该复选框则被选中。如果选中的文木未被加粗，该复选框则不被选中。如果被选中 
的文字有加粗的和未加粗的,那么复选框则 处丁一 种中间状态。为启用这种状态,要将 
IsThreeState 设 H 为 true 。 如果需要> 还可以订阅 Indeterminate 事件。处丁•这种中间状态的 
ToggleButton 外观会略有不同，按钮会显示-个小方块,而不是对号。 
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说到这甩，您或许会注意到另一个实现幵关的控件 ToggleSwitch 。 它是 t 为 Windows 8 
应用程序设 il •的。虽然 ToggleSwkch 并+是派牛& ButtonBase , 但示例中还是将其放在圾 
后一并列出。正如示例程序所展示的，它的默认标签为“关闭” （ Off ) 和 “ 启用” （ On ). 但 
可以修改。该控件还有一个标题，第8章会进行讲解。 

RadioButton 是 ToggleButton 的一种特殊形式 ， ffl 了'_在一组选项中选抒某 一个。 该控件 
的名称源 P 老式汽车收音机，这种收荇机 I •.有 用丁切 换预设电台的 按钮： 一个按钮被按下 
后，之前被按 卜的 按钮则会弹起。类似地，3某个 RadioButton 控件被选中，其他 RadioButton 
按钮则会取消选中，前提是这些按钮为同一 Ift 板的子元索。（需耍注怠的是，如果将某个 
RadioButton W . T ' Border 中，那么它将 M 其他 RadioButton 脱离关系。如果志要为 RadioButton 
添加 Border , 就应该使用模板。）如果需耍将同一面板中的多个 RadioButton 分成若干不相 
关的饥，则■以使用 GroupName _性。 

Control 类定义了 Foreground 厲性、字体相关属性、~ Border 相关的 M 性以及控制按 
钮外观的属性。例如，我们可以这样初 始化个 Button 。 

<Button Content="Not just a plain old Button anymore" 

Backgtound="Yellow" 

BorderBrush="Red" 



效果如卜阁所水。 



虽然设 H 了这些属性，但有些视觉效果仍然由模板控制。例如，当鼠标悬停于按钮上 
而或按 K 它，故色背景会立即变为标准颜色。此外， M 然我们吋以修改 Border 的颜色和粗 
细，但无法使其具有圆角。 

ButtonBase 派生自 ContemControl 。 iTi # 定义了一•个名为 Content 的属忡。虽然 Content 
M 性一般用 P 设符 文木，但也 uj •以被设宵为 Image 或而板。这使派牛的控件史为强大。例 
如，我们 uj •以为 Button 设 K 一个图片和一 个阁片 标题。 


<Button> 











Content 属性几乎可以被设背为任何对象，而通过模板可以定义该对象的外观。第 11 
章会具体介绍有关内容。 

下面我们一起制作一个简中.的电话拨号盘。拨号按键通过 Button 控件实现，而电话号 
码通过 TextBlock 显：/ j ;、 

在_卜'面这个 XAML 文件中，拨号键盘位丁_ HorizontalAlignment 和 VerticalAlignment 
均为 Center 的 Grid 中，因而拨号键盘显示于屏幕正中央。先不论拨号键盘和按钮内容有多 
大，但至少12个按钮的尺寸是相同的。示例中采用了两种方法来设置按钮的宽度和高度。 
容纳拨号键盘的 Grid 的宽度为 288( 大约为 3 英 寸)。 这个宽度值是具体的，因为用户可能 
按下多位号码，不应使 Grid 适应一个过大的 TextBlock. 每个 Button 的卨度通过隐式样式 
来指定。 

项 R: SimpleKeypad I 文件： MainPage.xaml < 片段） 

<Grid Background:"(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Grid HorizontalAlignment="Center" 

VerticalAlignment="Center" 



<Style TargetType="Button"> 

〈Setter Property="ClickMode" Value="Press" /> 

<Setter Property="HorizontalAlignment" Value="Stretch" /> 
<Setter Property="Height" Value="72" /> 

〈Setter Property="FontSize" Value-"36" /> 


</Style> 



<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
〈RowDefinition Height»"Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height«"Auto" /> 

</Grid.RowDefinitions> 

〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width:"* M /> 
<ColumnDefinition Width="*" /> 
<ColumnDefinition Width-"•" /> 



<Grid Grid.Row-"0" Grid.Column="0" Grid.ColumnSpan="3"> 
〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="*" /> 

<ColumnDefinition Width="Auto" /> 



第 5 章控件与交互 


133 


<Button Name="deleteButton" 
Content="&#x21E6;" 
Grid.Column="l" 

IsEnabled="False" 
FontFamily-"Segoe Symbol" 
HorizontalAlignment="Left M 
Padding- M 0" 

BorderThickness="0" 
Click=-OnDeleteButtonClick" /> 

</Grid> 

<Button Content-"1" 

Grid.Row="l" Gx:id.Column="0" 
Click- w OnCharButtonClick" /> 

<Button Content="2" 

Grid.Row="l" Grid.Column=T 
Click-"OnCharButtonClick" /> 


<Button Content» M 3" 

Grid.Row="l" Grid.Col 



<Button Content-'M" 

Grid.Row="2" Grid.Column= M O n 
Click»"OnCharButtonClick" /> 


<Button Content= H 5" 

Grid.Row="2" Grid.Column:"1" 
Click="OnCharButtonClick" /> 


〈Button Content="6" 

Grid.Row- M 2 M Grid.Column-"2" 
Click= M OnCharButtonClick" /> 

〈Button Content="7" 

Grid.Row="3 H Grid-Column-"。" 
Click="OnCharButtonClick" /> 

<Button Content»"8" 

Grid.Row="3" Grid.Column="l" 
Click="OnCharButtonClick M /> 


<Button Content="9" 

Grid.Row="3" Grid.Column="2" 
Click- M OnCharButtonClick M /> 

<Button Content-"*" 

Grid.Row="4” Grid.Column="0" 
Clicf’OnCharButtonClick" /> 


<Button Content="0" 

Grid.Row="4" Grid.Column="l" 
Click= ,, OnCharButtonClick" /> 


<Button Content:"#" 

Grid.Row="4" Grid.Column= M 2" 
Click= M OnCharButtonClick" /> 

</Grid> 

</Grid> 


号码敁 〆 区域 位丁第 一行。此行需要包含一个 TextBlock 来 M 水已输入的弓•码和一个 
删除按钮，因而 Grid 的第一行嵌套了另一个 Grid 来 M 示这两个元素。删除按钮軍写了隐 



式样式的许多设 w 。 诮注意，删除按钮初始状态卜是被禁用的，只有 拨弓后 才会被 / a 用。 

TextBlock 辂后的逻辑较复杂。在正常输入状态下，它是左对齐的，但如果 M 氺的号码 
过长，应截断 TextBlock 左侧卞符，而非右侧的。为解决这个问题，可以将此 TextBlock ® 
f Border 中。 

<Border Grid.Column="0" 

HorizontalAlignment="Left"> 

<TextBlock Name="resu1tText" 

HorizontalAlignment="Right w 

VerticalAlignment="Center" 

FontSize="24" /> 

</Border> 

Border 对 TextBlock 的宽度做了限 制： 后者的宽度+能超过外层 Grid 勺删除按钮的宽 
度 之差。 在这个区域内， Border 是左对齐的。 ill 于 TextBlock 句 Border 等宽，尽管对齐方 
式+同，但 TextBlock 仍位 TA :. 端。在键入较多号码后， TextBlock 的宽度会超过 Border 
的宽度。此时，值为 Right 的 Horizontal Alignment 设置便开始起作用，即将 TextBlock 的左 
侧超出的部分遮盖。 

此程序除第一行以外，都相对 简中。 隐式样式在很大程度上简化了 10个数字和2个符 
号按钮的 XAML 标记。 

代码隐藏文件包含删除按钮和拨号按钮的 Click 屯件处理程序。’其中 ， 12个拨号按钮 
共用同一处理程序。 


项 R: Simple 
public seal* 


ypad I 文件： 
partial cla 


inPage. xaml. cs ( 片段 } 
MainPage : Page 


string inputstring = 
char IJ specialChars = 


public MainPage() 


Ld OnCharButtonClick(object 

Button btn = sender as Butt 
inputstring += btn.Content 
FormatText(); 


RoutedEventArgs 


OnDeleteButtonClick(object 


RoutedEventArgs 


inputstring.Substring(0, ir 


3.Length - 


inputstring.IndexOfAny(specialChars) != -1; 


(hasNonNumbers |I inputstring.Length 
resultText.Text = inputstring; 

se if (inputstring.Length < 8) 
resultText.Text = String.Fonnat("{0}- 


inputstring.Length 


inputstring.Substring<0, 
ng•Substring(3)); 
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resultText.Text = String.Format C ((0)) 


deleteButton.1 


inputString.Substring<0, 3), 
inputstring.Substring(3, 3 ), 
inputstring•Substring(6)>; 


删除按钮的处理程序能够移除 inputstring 字段中的一个宁符，另 一个处 理程序能够向 
该字段添加一个字符。这两个处理程序最; H 会调用 FormatText 方法，将字符串以电话弓码 
格式显氺。该方法的最后，在输入字符串含有字符的情况 f 会启用删除按钮。效果如卜图 
所示。 



OnCharButtonClick 诉件处理程序 M 过被按下按钮的 Content 厲性宋决定要追加到输入 
字符串的卞符。按钮的 Content 属性值~按钮的功能之间这种关联并非总是存在的。在多 
个按钮共用同一个 If 件处理程序的情况 K , 该处理程序志耍获得史多有关按钮的信息。 
FrarheworkElement 定义了一个 Tag 诚性.此时刚好 KT 以用。我们可以在 XAML 文件中力 
Tag 设黃 : 一个用丁-标 识所诚 允素的 T 符串或对象，并在車件处理程序中读取该属性。水茕 
稍后介绍 RadioButton 时会提供相关演示。 

5.9 依赖属性的定义 

假设某应用程序要求所冇 Button 控件通过渐变 ffli 笔来 V 示其文木。当然，我们吋以分 
別为毎个 Button 的 Foreground 厲件设質 LinearGradientBrush . 但 iti 终的标记 会有作 lli 
町以将 Style 的 Foreground W 性设为 LinearGradientBrush . ( U . + M 的 Button 将共用渐变 
效果完全相同的 LinearGradientBrxisho 如果 S: 求吏加灵活些呢？ 

现在耍求创建一种 Button . 开发者4以通过名为 Colorl 和 CoIor 2 的属性来设 W . 渐变色 
的两个颜色-我们可以从 Button 派' _k -个类，在该类的构造函数中创达 LinearGradientBrush 
对象，然 / T ； 定义 Colorl 和 Color 2 厲件來控制_笔的颜色。 

Colorl 和 Color 2 属性"]■否为带有 set 和 get 访问器的 W 通 .NET 厲性？是的，这样做是 
吋以的。然而，定义这样的 m 性会限制该控件的应用范 m 。 这样的诚性+能作为样忒、绑 
定和动_的 y 标属性。唯有依赖厲性能够旅顾。 
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依赖属性要比??通属性复杂些，但掌握如何定义依赖属性是开发者应具备的一项歌要 
技能。 创建一个项 LI， 添加一个新项，在列表中选择“类”并将其命名为 GradientButton。 
在类文件中，将其定义为公共类并使其继承于 Button。 

public class GradientButton : Button 


卜面将完善该类的定义，另外还需要添加若I using 指令。 

添加两个类型为 Color 的属件，分别命名为 Colorl 和 Color2。 相应地，我们志要定义 
类印为 Dependency Property ,名称分别为 Color I Property 和 Color2Property 的依赖厲性。 

public static DependencyProperty Color 1 Property { private set; get; I 
public static DependencyProperty Color2Property { private set; get;) 

DependencyProperty 对象 nj 以在静态构造函数中创建。 DependencyProperty 类定义广 
个名为 Register 的静态方法，专门用来创建 DependencyProperty 对象。 

static GradientButton() 



typeof(GradientButton), 

new PropertyMetadata(Colors.Black, OnColorChanged)); 


还有一个稍有不同的静态方法 DependencyProperty.RegisterAUached , 用 于注册 附加 
属性。 

DependencyProperty.Register 的第一个参数是属性的名称。 XAML 解析器町能会用到这 
个值。第：个参数是属性的类甩。 第三个 参数是注册当前依赖属性的类的类甩。 

第四个参数需要传入类型为 PropertyMetadata 的对象。该类型的构造函数有两个。第 
一个用丁•指定属性的默认值，第二个用于指定 厲性 发生更改时耍调用的方法。如果设霄到 
依赖属性的新值与原值相同，则该方法不会被调用。 

PropertyMetadata 构造函数的第一个参数默认值的类型必须匹紀 Register 第：个参数指 
定的类型，否则会产生运行时异常。这并非听上去那么无关紧要。例如，程序员往往为 double 
类型的 M 性设置默认值0。在编译时，0会被认为是整型，因而在运行时会出现类型不卩I；配， 
进而产生好常。如果定义 double 类型的依赖属性，可以将默认值设®为 0 . 0 , 这样编译器 
便会将该参数识别为正确的类型。 

除了使用静态构造函数，还可以定义私有静态字段。先在字段 J：. 直接初始化 
DependencyProperty 对象，然后通过公共静 态域性 将这些对象暴沲出来。 

static readonly DependencyProperty color 1 Property = 

DependencyProperty. Register ("Color 1 , 
typeof(Color), 
typeof(GradientButton), 

new PropertyMetadata(Colors.White, OnColorChanged)); 
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static readonly DependencyProperty color2Property = 
Dependency Proper ty. Register ("Color2 •’， 
typeof(Color ), 
typeof(GradientButton), 

new PropertyMetadata(Colors.Black, OnColorChanged)); 
public static DependencyProperty Color1Property 



public static DependencyProperty Color2Property 



显式的静态构造函数并 +强制 要求。我们可以沿用 WPF 或 Silverlight 的风格，直接暴 
露公共的静态字段，而不定义公共静态属性。就本示例而言，我们可以定义两个分别名为 
Color 1 Property 和 Color 2 Property 的字段。 

public static readonly DependencyProperty ColorlProperty = 



typeof(Color), 
typeof(GradientButton ), 

new PropertyMetadata(Colors.White, OnColorChanged)); 

public static readonly DependencyProperty Color2Property = 

DependencyProperty.Register("Color2", 
typeof(Color), 
typeof(GradientButton), 

new PropertyMetadata(Colors.Black, OnColorChanged)); 

虽然 Windows 8 支持这种方式，但本人不倾向于这么做，因为标准 Windows Runtime 
控件都是通过静态公共属性暴露的 DependencyProperty 对象，而不是通过字段。 

小论通过静态属性还是静态字段来暴露 DependencyProperty 对象，我们都需要为 
GradientButton 定义两个分别名为 Color 1和 Color 2 的常规 . NET 属性。这些属性的形式非常 

统一。 



set { SetValue(ColorlProperty, value);) 

get { return (Color)GetValue(ColorlProperty); } 

J 

public Color Color2 

{ 

set ( SetValue(Color2Property, value); } 

get { return (Color)GetValue(Color2Property);) 

) 

访问器 set 耍调用 SetValue 方法(继承于 DependencyObject 类) 并传入依赖属性对象，访 
问器 get 要调用 GetValue 并将结果转换为当前属性的类型。若不希望该属性被外界修改， 
>4以用 protected 或 private 来修饰访问器 set 。 

我们需要将 GradientButton 控件的 Foreground 屈性设 1!为 LinearGradientBrush 对象。 
Colorl 和 Color 2 属性分别用于设覽两个 GradientStop 对象的颜色。这两个 GradientStop M 
象是以字段的形式定义的。 


GradientStop gradientStopl, gradientStop2 ; 
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我们以在类的常规实例构造函数 中创逑 这两个 对象及 M 笔对象 LinearGradientBrush ， 
最后将该画笔对象设靑到 Foreground 厲性 I :。 

public GradientButton() 


gradientStopl = new GradientStop 



谘注意这段代码通过 Colorl 和 Color 2 _性来初始化 GradientStop 对象的过程。 
LinearGradientBrush 就这样通过两个依赖厲性获得了默认颜色。 

前文定义这两个依赖属性时提 到了一 个名为 OnColorChanged 的方法。该方法会在 
Colorl 或 Color 2 敁性发 I 变化时被调用。巾于这个属性变更通知方法是在静态构造函数中 
引用的，那么该方法必须也是静态的。 

static void OnColorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) 


定义 GradientButton 类是为了在应 ffl 程序中多次 MM 】， 而现在却要在类的实例中定义 
一个 Colorl 或 CoIor 2 属性发生更改时调用的静态方法。这 似乎让 人难以捉換。我们如何才 
能得知该方法作用于哪个实例？ 

其实也容易，使用第一个参数即"1。 OnColorChanged 方法的第一个参数总是会传入相 
关属性被修改的 GradientButton 对象。我们叶以放心地将该对象转换力 GradienlButton ， 然 
后访问 GradientButton 的实例字段和 属性。 

本人倾向 r •在这个静态方法中调用同名的实例方法，并传入第二个参数。 

static void OnColorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) 

( 

(obj as GradientButton).OnColorChanged(args) / 

) 

void OnColorChanged(DependencyPropertyChangedEventArgs args) 


我们可以通过第二个方法来访问该类的实例字段和属性。 

DependencyPropertyChangedEventArgs 对象为我们提供了一些有价值的信息。它的 
Property 屈性的类别为 Dependency Property ,能够指明源对象的哪个属性被史改。就木例而 
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h* Property 属性 "J* 能为 Color 1 Property 或 Color2Properly o DependencyPropertyChangedEvenlArgs 
对象还有名为 OldValue 和 NewValue 的属性，类型均为 object 。 

GradientButton 类中的这个属性变更处理程序可以根据 NewValue 来设置相应 
GradientStop 对象的 Color 属性。 

void OnColorChanged(DependencyPropertyChangedEventArgs args) 



上述内容是 GradientButton 所需的全部代码。剩下的只需要将这些代码合理地组织在 
GradientButton 类中。木人习惯丁 • 将所有字段置于最顶端，随后依次放置静态构造函数、静 
态属性、实例构造函数、实例属性， S 后是所有方法。下面是示例项 H DependencyProperties 
中 GradientButton 类的完整代码。 

项 R: DependencyProperties | 文件： GradientButton. cs 



using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media / 



public class GradientButton : Button 

( 

GradientStop gradientStopl, gradientStop2; 
static GradientButton() 



DependencyProperty.Register("Color1", 
typeof(Color), 
typeof(GradientButton), 

new PropertyMetadata(Colors.White, OnColorChanged)); 
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LinearGradientBrush brush = new LinearGradientBrush(); 
brush.GradientStops.Add(gradientStopl); 
brush.GradientStops.Add(gradientStop2); 

this.Foreground = brush; 


public Color Color1 

{ 

set I SetValue(ColorlProperty, value); } 

get { return (Color)GetValue(Color1Property); } 


public Color Color2 

i 

set { SetValue(Color2Property, value); } 

get ( return (Color)GetValue(Color2Property); } 


static void OnColorChanged(DependencyObject obj, 

E)ependencyPropertyChangedEventArgs args) 

{ 

(obj as GradientButton).OnColorChanged(args); 


void OnColorChanged(DependencyPropertyChangedEventArgs args) 



gradientStopl.Color = this.Color1; 


if (args.Property *= Color2Property) 

gradientStop2.Color = (Color)args.NewValue; 


属性更改处理程序有很多种写法。若为不同属性指定单独的处理程序，则不需要检杏 
事件参数的 Property 属性。 

另一种写法是直接访问类的实例属性，而+使用 NewValue 属性。 例如： 



属性更改处理程序被调用时， Colorl 属性匕被设置为新值。 

Color 1和 Color 〗 厲性的值实际#储在哪里？本人猜测是某种字典，或许是某些优化的 
机制(但聪如此)，但都无法通过 API 茛接访问。这些 M 性的状态由操作系统管理，我们只 
能 M 过 SetValue 和 GetValue 方法来访问它们的值。 

该示例项0的 XAML 文件定义了两个样式。第一个样式通过 Setter 元素设置 Colorl 
和 Color 2 屈件，作用 p GradientButton 的两个 实例。 任何引用 GradientButton 的 XAML 文 
件需要预先通过 XML 命名空间 local 来引入 GradientButton 所在命名空间 
Dependency Properties 。 请注意，两个 Style 的 TargetType 和按钮的实例化标记都使用了前 
缀 local o 

项 R: DependencyProperties I 文件： MainPage.xaml ( 片段 > 








Style="(StaticResource baseButtonStyle)" 
Colorl= M Aqua" 

Color2«"Lime" /> 



从下图可知,在这三个按钮中,第一个采用的是 Colorl 和 Color 2 的默认设置,第二个 
采用的是 Style 中定义的设賢，第三个采用的是局部设 S 。 



下血将介绍另一种创建 GradientButton 的方法，即在 XAML 中定义 
LinearGradientBrush , 并避免使用属性变史处理程序。 F 面我们肴#具体如何实现。 

在一个笮独的项 U 中，添加新项。为创建 GradientButton 类，我们这次不选扦“类” 
模板，而选抒“用户控件”，将其命名为 GradientButton 。 这样，我们便会得到一对 文件： 
GradientButton.xaml 和 GradientButton . xaml . cs 。 这个 GradientButton 炎:派 'klM UserControl ,, 
GradientBulton . xaml . es 文件中的类足卜 ' ifti 这样定义的。 
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我们将父类巾 UserControl 改为 Buttono 

public sealed partial class GradientButtoi 

( 

public GradientButton() 



这个类的主体部分与之前的 GradientButton 类非常类似，但这甩的实例构造函数只调 
用 InitializeComponent 方法，而不做其他操作。另外，这个 GradientButton 控件也不定义属 
性变更处理程序。示例项13 DependencyProperliesWithBindings 展•了这个类。 

项 DependencyPropertiesWithBindings I 文件： GradientButton.xaml.es ( 片段 > 
public sealed partial class GradientButton : Button 



DependencyProperty.Register("Color2" / 
typeof(Color), 
typeof(GradientButton), 
new PropertyMetadata(Colors.Black)); 


public static DependencyProperty Color1Property { private set; get; } 


public GradientButton() 

this.InitializeComponent(); 



set { SetValue(Color1Property, value);) 

get 1 return (Color)GetValue(ColorlProperty); } 


public Color Color2 
{ 

set { SetValue(Color2Property, value); } 

get { return (Color)GetValue(Color2Property);) 


GradientButton . xamI 文件最初被创建时，根竹点声明这个类派牛 UserControl 。 



x:Class="DependencyPropertiesWithBindings.GradientButton" ... > 



我们需耍像卜 Ifn 这样将这个父类改为 Buttono 
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x:Class="DependencyPropertiesWithBindings.GradientButton" ••• > 



一般情况卜， XAML 的根标签中的内容会被设賈到 Content 属性上。本示例不希望设 
胃 Button 的 Content 属性，而要将 GradientButton 的 Forground 属性设置为 
LinearGradientBrusho 为此我们要用到属性儿素标签 Button.Foregroundo XAML 文件的完整 

内容如下所示。 

项 R: DependencyPropertiesWithBindings | 文件： GradientButton.xaml 



x:Class="DependencyPropertiesWithBindings.GradientButton" 
xmlns*"http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation'' 
xmlns:x='*http: //schemas .microsof t. com/winf x/ 2006 / xaml" 



请注意 GradientStop 对象的 Color 诚性是如何 被设贾的：为 了让两个数据绑定能够引用 
自定义的依赖属性，这 1 P . 将根元素命名为 root , 使其可以作为数据绑定的源对象。 

此项 U 的 MainPage . xaml 文件和终结果与上一个示例相同，这甩不再赘述^ 

5.10 RadioButton 


用户可以通过一组 RadioButton 控件在若千互斥的选项中选取一项。从程序的角度看， 

同一组 RadioButton 控件的不同实例 M 好与枚举成员-对应，通过 RadioButton 对象来获 

取枚 举值。 这样，冋一组 的中选 按钮便 iiJ ■以共用一个車件处理程序。 

为此，我们可以利用 Tag M 性。 Tag 属性可以被设賢为任何一个能够标识当前控件的 
对象。假设要写一个程序来测试 Shape 定义的 StrokeStartLineCap 、 StrokeEndLineCap 和 
StrokeLineJoin 属性。在呈现较粗的线时，这三个属性吋以控制线的端部及对接处的形状。 
StrokeStartLineCap 和 StrokeEndLineCap 属性需要被设置为枚举类型 PenLineCap 的成员， 
而 StrokeLineJoin 属性说要被设 W 为枚华类呢 PenLineJoin 的成员。 

例如，枚举类型 PenLineJoin 有一个名为 Bevel 的成员。那么我们便可以这样定义代表 
该选项的 RadioButtono 


〈RadioButton Content="Bevel join" 
Tag="Bevel" 


问题在于 Bevel 会被 XAML 解析器解析为字符串，因而在代码隐藏文件的处理程序中， 
我们需要通过 switch 和 case 语句来区分不同字符串，或者使用 Enum . TryParse 将字符串转 



换为 PenLineJoin 枚举值。 

为避免这种转换， 町以将 Tag 属性以屈件元袭的形式 K 式地为其指定 PenLineJoin 类型 
的值。 

<RadioButton Content="Bevel join" 

… > 

<RadioButton.Tag> 

<PenLineJoin>Bevel</PenLineJoin> 

</RadioButton.Tag> 

</RadioButton> 

当然，这样的标记略显冗长。尽管如此，•例项 H LineCapsAndloins 仍然采用了这种 
方法。该项 H 的 XAML 文件定义 f 3组 RadioButton 控件，分别用来设1； 3个 Shape 属性。 
每组设置包含个中选按钮控件，4枚平成员-对应。 

项 R: LineCapsAndJoins | 义件： MainPage.xaml ( 八段 > 

<Grid Background 3 "IStaticResource ApplicationPageBackgroundThemeBrush}"> 
<Grid.RowDefinitions> 

<RowDefinition Height="*" /> 

<RowDefinition Height="Auto" /> 

</Grid.RowDefinitions> 



<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width="*" /> 
<ColumnDefinition Width="Auto" /> 
</Grid.ColumnDefinitions> 



Grid.Row= H 0" Grid.Column="0" 

Margin= ,, 24"> 

<RadioButton Content="Flat start" 

Checked="OnStartLineCapRadioButtonChecked"> 
<RadioButton.Tag> 

<PenLineCap>Flat</PenLineCap> 

</RadioButton.Tag> 

</RadioButton> 

<RadioButton Content="Round start" 

Checked="OnStartLineCapRadioButtonChecked"> 
<RadioButton.Tag> 

<PenLineCap>Round</PenLineCap> 

〈 /RadioButton•Tag 〉 

</RadioButton> 

<RadioButton Content="Square start" 

Checked="OnStartLineCapRadioButConChecked , *> 
<RadioButton.Tag> 

<PenLineCap>Square</PenLineCap> 

</RadioButton.Tag> 

</RadioButton> 

<RadioButton Content="Triangle start" 

Checked="OnStartLineCapRadioButtonChecked"> 


<RadioButton.Tag> 





Checked="OnEndLineCapRadioButtonCheckeci"> 
<RadioButton.Tag> 

< PenLineCap>Flat</PenLineCap> 

</RadioButton.Tag> 



<RadioButton Content="Round end" 

Checked="OnEndLineCapRadioButtonChecked"> 
<RadioButton.Tag> 



</RadioButton.Tag> 

</RadioButton> 

<RadioButton Content="Square end" 

Checked="OnEndLineCapRadioButtonChecked"> 
<RadioButton.Tag> 

<PenLineCap>Square</PenLineCap> 

</RadioButton.Tag> 



</RadioButton.Tag> 


</RadioButton 〉 

</StackPanel> 

<StackPanel Name="lineJoinPanel" 

Grid.Row= M l M Grid.Column= H l M 




<KaaioBucton uontent="Bevei join" 

Checked="OnLineJoinRadioButtonChecked"> 
〈 RadioButton.Tag> 

<PenLineJoin>Bevel</PenLineJoin> 

</RadioButton.Tag> 

</RadioButton> 

<RadioButton Content="Miter join" 

Checked="OnLineJoinRadioButtonChecked"> 
<RadioButton.Tag> 

<PenLineJoin>Miter</PenLineJoin> 

</RadioButton.Tag> 

</RadioButton> 

<RadioButton Content="Round join" 

Checked="OnLineJoinRadioButtonChecked"> 
<RadioButton.Tag> 

<PenLineJoin>Round</PenLineJo ; 

</RadioButton.Tag> 

</RadioButton> 

</StackPanel> 


<Polyline Name="polyline" 

Grid.Row="0" 

Grid • Column=•• 1" 

Points- M 0 0, 500 1000, 1000 C 
Stroke="(StaticResource Appli 
StrokeThickness="100" 
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毎组 RadioButton 控件被置于相应的 StackPanel 中。属 P 同一个 StackPanel 的中-选按钮 
控件共用一个 Checked U 件处理程序。 

这段标记未使任何 RadioButton 初始处于选中状态。这个操作 rfl 代码隐藏类的构造函数 
定义的 Loaded 处理程序完成。（若在构造函数中直接进行初始化，而+使用 Loaded 处理程 
序，则只有设 S 线对接处样式的那组 RadioButton 控件会被正确初始化，而其他两组设 H 不 
会，这甚是怪异。） 

这段标记最后定义了 —个较粗的 Polyline ,用于展示 StrokeStartLineCap 、 
StrokeEndLineCap 和 StrokeLineJoin 属性变化的效果。属性设置实际发生在代码隐藏文件的 
Checked 車件处理程序中。 

项目 ： LineCapsAndJoins I 文件： MainPage.xaml.cs 段） 
public sealed partial class MainPage : Page 
{ 

public MainPage() 



Loaded 处理程序对毎组 RadioButton 控件进行迭代，如果当前 RadioButton 的 Tag 值匹 
配 Polyline 的对应属性，则将这个 RadioButton 的 IsChecked 属性设 SA true 。 续 
RadioButton 的选中状态取决丁-用户的操作。 Checked 事件处理程序只需要根据被选中的 
RadioButton 的 Tag 属性来修改 Polyline 的相应属性即可。此程序的运行效果如 F 图所示。 
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M 然这段标记! ui 式地将 Tag 厲性设怦为 PenLineCap 或 PenLineJoin 枚举的成员， 
XAML 解忻器实 h h 会为 Tag 赋一个 1 j 枚平成员对应的格数值。我们吋以轻而易举地将 
这个粮数转换为对应的枚平成员，但 Tag M 性存储的绝非枚举成员木身。 

通过定义&定义控件，尔例项 II LineCapsAndJoins 的大部分标记 都町以 省略。这些 
定义控件的标签 (tag)_ 性+必是依赖 M 性.使用具有特定类彻的普通 .NET 属件即可。 

示例项 U LineCapsAndJoinsWithCustomClass 展示了这种实现方式 <> 这个派生自 
RadioButton 的校件 V 门 W 来设胃 PenLineCap 值。 

项 LineCapsAndJoinsWithCustomClass I 义件： LineCapRadioButton.es 
using Windows.UI.Xaml.Controls; 
using Windows .UI .Xaml.Media; 



public class LineCapRadioButton : RadioButton 
public PenLineCap LineCapTag { set; get; } 


类似地， 用于设 l 1 PenLineJoin 的控件如卜所4。 

项 PI: LineCapsAndJoinsWithCustomClass I 义件： LineJoinRadioButton.es 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media; 



public PenLineJoin LineJoinTag ( set; get? } 


这矾将通过一段 XAML 来演示 （h -例中 ： .纽 RadioButton 控件的 倔性 元崇语法是 
如何被省略的。 

项 FI: LineCapsAndJoinsWithCustomClass | 义 • 件： MainPage.xaml ( 片段） 

<StackPanel Name=' , lineJoinPanel" 

Grid.Row="l" Grid.Column:"1" 
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HorizontalAlignment-"Center" 



LineJoinTag="Bevel' 

Checked="OnLineJoii 



<local : LineJoinRadioButcon Content«"Miter join" 

LineJoinTag="Miter" 

Checked»"OnLineJoinRadioButtonChecked" /> 
<local : LineJoinRadioButton Content-"Round join" 


LineJoinTag="Round" 



在 Visual Studio 键入此元素时，“智能感知”功能能够正确地将 LineCapTag 和 
LineJoinTag 属性识别为相应的枚举类型，并提示可选的枚举成员，这个必须得赞一个！ 
使用自定义的 RadioButton 派生类后，变化基本上集中在 XAML 文件。代码隐藏文件 
除了省略了部分类艰转换.其他大致相同。 

项 R: LineCapsAndJoinsWithCustomClass | 文件： MainPage.xaml.cs 川段） 
public sealed partial class MainPage : Page 
( 

public MainPage() 


this.InitializeComponent(); 



foreach (UIElement child in startLineCapPanel.Children) 

(child as LineCapRadioButton).IsChecked = 

(child as LineCapRadioButton).LineCapTag = polyline.StrokestartLineCap; 


foreach (UIElement child in endLineCapPanel.Children) 

(child as LineCapRadioButton).IsChecked = 

(child as LineCapRadioButton).LineCapTag =* polyline.StroReEndLineCap; 


foreach (UIElement child in lineJoinPanel.Children) 

(child as LineJoinRadioButton).IsChecked = 

(child as LineJoinRadioButton).LineJoinTag = polyline.StrokeLineJoin; 


void OnStartLineCapRadioButtonChecked(object sender, RoutedEventArgs args) 

( 

polyline.StrokeStartLineCap = (sender as LineCapRadioButton).LineCapTag; 

) 

void OnEndLineCapRadioBu t tonChecked(obj ect sender, RoutedEventArgs args) 
polyline.StrokeEndLineCap = (sender as LineCapRadioButton).LineCapTag; 

) 

void OnLineJoinRadioButtonChecked(object sender, RoutedEventArgs args) 

{ 

polyline.StrokeLineJoin = (sender as LineJoinRadioButton).LineJoinTag; 





5.11 键盘输入与 TextBox 


触投键盘允许用户通过点 击屏铪 來输入文本，这使得 Windows 8应用程序的键盘输入 
变得复杂化。虽然触投键盘对 f •板电脑和没有物理键盘的设备来说必+吋少，但人们仍有 
|| J 能为其添加物理键盘。 

如此一来.使触換键盘能够适时地弹出和消失就 W . 得至关®要。为此，许多控件(包括 
定义 控件) 并不 &动接 收键盘输入。矜果真如此，系统则要在控件得到输入焦点时调用触 
換键盘。从另一个角度讲，如果创建&定义控件并订阅 KeyUp 和 KeyDown ' K 件处理程序(或 
軍写 OnKeyUp 和 OnKeyDown 方法)，则会发现它们+会被调用。我们 ® 要写必耍的代码 
来使控件获得输入焦点。 

如果只希铝从物理键盘获得键盘输入， rfU 不关心触投键盘(或许只是为了测试)，吋以 
采用一种非常简中.的方法。首先，在奴曲的构造函数中获取应用程序的 CoreWindow 对象。 

CoreWindow coreWindow = Window.Current.CoreWindow; 

CoreWindow 类位 -丁- Windows . Ul . Core 命名空 网。 我们 nj ■以订阅该对象的 KeyDown 和 
KeyUp 牛(能够提小•哪个键被按 F > 以及 CharacterReceived (能够将按键转换为字 符)。 

如果所创迚的 Q 定义控件需要从物现键盘和触投键盘获取键盘输入，实现起来就要稍 
微复 杂些。 我们需要从 FrameworkElementAutomationPeer 类（实现了 ITextProvider 和 
IValueProvider 接口)派牛： '个类，并通过定义控件的 OnCreateAutomationPeer 方法宋 
返回这个派牛:类的对象。 

K 然，实际做起来并不那么容易。第16章会展示具体步骤。 

如果某个应用程序只需耍文本输入，那么直接利用以卜任何•个控件最为经济。 

• TextBox 支持以统一的字体输 入中行 或多行文木。该控件在多行模式 K Windows 
中传统的“记事本”程序非常相似 

• RichEditBox 支持格式化的文本 ， U Windows 中传统的“写字板”程序非常相似 

• PasswordBox 支持中.行的密码输入 

下面将重点介绍 TextBox , 后面的章节也有一些示例。第16章会着車:介绍 RichTextBox 。 

TextBox 定义了 个 Text 属性，我们 " J ■以通过它来设背 TextBox 的文本，也 uj ■以 通过 
它获取 TextBox 的当前文木。 SelectedText 属性能够返回被选中的文木（如果 有）， 
SelectionStart 和 SelectionLength 属性能够返回被选中文木的起始位 l S 和 K ; 度。如果 
SelectionLength %] 0,那么 SelectionStart 返回的则是光标的位将 IsReadOnly M 性设買 
为 true 吋以避免文木内容被修改，但允许用户将被选中的文木复制到“剪贴板”。“剪 
切”、“复制”和“粘贴”操作4以 M 过上 F 文菜中.完成。 TextBox 还定义了 TextChanged 
取件和 SelectionChanged 件。 

TextBox 在默认情况 卜只允 0•输入中.行文木。有两个域性 " J •以修改这个行为。 

• TextBox 默认忽略 Enter (回午 ) 符。若将 AcceptsRetum 设置为 true , 那么 TextBox 
会在用户按 K Enter 键后另起一行。 

• TextWrapping 属性的默认值为 NoWrap 。 荇将该域性设胃 Jj Wrap , 那 么超出 一行 


的文本会自动换行。 

这两个 M 性 "•! 以中独设置。+论通过哪种方式换行，换行后 TextBox 的卨度都会增长。 
TextBox 内建/ ScroMViewer 。 如果不希望 TextBox 无限增长，可以设置 MaxLength 属性。 

触換键盘并非只有一种。它们有的适合输入数字，有的适合输入电子邮件地址，而冇 
的适合输入 URI 。 我们可以通过 TextBox 的 InputScope 属性来指定触投键盘的类型。 

不 - 例项 H T ext Box 1 nputScopes 肢示 了 +同的键盘布局、多行 TextBox 的小同模式。 
PasswordBox 也在此一并展示。 


项月 ： TextBox I nputScopes I 文件 ： MainPage .xaml (八段 > 




<Grid.ColumnDefinitions 〉 
<ColumnDefinition Width= 
















InputScope="Default" /> 


<! — Email address input scope --> 
<TextBlock Text="Email address input scope : 



<! — Telephone number input scope --> 
<TextBlock Text="Telephone number input scope : 



<TextBox Grid.Row="7" Grid.Column="l" 

InputScope="TelephoneNumber" /> 

<!-- URL input scope --> 

〈TextBlock Text="URL input scope:” 

Grid.Row="8" Grid.Column="0" /> 



<TextBlock Text="PasswordBox:" 

Grid.Row="9" Grid.Co1umn="0" /> 

<PasswordBox Grid.Row="9" Grid•Column 3 "1" /> 



</Grid> 

</Page> 

在选杵多行模忒或设 H 1 叩 utScope 时，+妨通过这个程序来做试验。 


5.12 触摸与 Thumb 

第13章将 i 、 J ■论触換输入以及如何通过触換输入来操纵屏幕1•.的对象。相对而 r 3. Thumb 


^ ndows . UI . Xaml . Controls.Primitives 命名空 N , 主耍用作 Slider 和 Scrollbar 的构建块。第 
章将进一步介绍一种自定义的网格分隔控件。 
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Thumb 控件能够根据鼠标、触控笔或触換相对自身的滑动生成3种 車件： DragStarted . 
DragDelta 和 DragCompleted 。 当手指点击 Thumb 控件或荠鼠标中-击该控件时 ， DragSlarted 
事件会被引发。随后， DragDelta 事件会被接连引发 I 从而提示手指或鼠标的移动轨迹。我 
们 uJ •以通过这两个車件来移动 Thumb (和其他控 件)， 如果将 Canvas 作为容器，则实现起来 
iS 为 方便。 DragCompleted 事件提示手指抬起或鼠标按钮被释放。 

示例程序 AlphabetBlocks 定义了一些标有字母、数字和符号的按钮。这些按钮环绕在 
屏幕四周。中.击仟意一个按钮，屏幕上便会显示 一个可 用手指或鼠标拖动的7-母块。人们 
4能希望快速泔动手指使字母块在屏幕上自 til 滑动，但这种现象不会发生 。 Thumb +女持 
触換惯性。 为了茯 得惯性效果，耑耍用到以 Manipulation 开头的触换卞件。 

字母块木身是 UseKTontrol 的派牛.类，名为 Block 。 XAML 文件中定义了边 L < :为 144像 
素的正方形区域,包含图片、 Thumbs 矢最图和 TextBlock , 

项 R: AlphabetBlocks | 文件： Block. xaml 
<UserControl 

x:Class-"AlphabetBlocks.Block" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml'* 
xmlns : local= M using:AlphabetBlocks" 

Width:"144" 

Height:"144" 

Name= M root"> 

<Grid> 

〈Thumb DragStarted="OnThumbDragStarted M 
DragDelta="OnThumbDragDelta" 

Margin*"18 18 6 6" /> 

<! ― Left —> 

<Polygon Points= H 0 6, 12 18, 12 138, 0 126" 

Fill="tE0C080" /> 

<!— Top --> 

<Polygon Points="6 0, 18 12, 138 12 , 126 0" 

Fill="#F0D090" /> 

<!-- Edge 一 > 

〈Polygon Points="6 0, 18 12, 12 18, 0 6" 

Fill-"#E8C888 M /> 

<Border BorderBrush="{Binding ElementName=root, Pach=Foregxround)" 
BorderThickness="12" 

Background =" 参 FFEOAO" 

CornerRadius="6 M 

Margin="12 12 0 0 M 
IsHitTestVisible»"False" /> 

<TextBlock FontFamily* w Courier New" 

FontSize="156" 

• FontWeight- M Bold" 

., Text="(Binding ElementName-root, Path=Text)" 

HorizontalAlignment="Center" 

• . ’ VerticalAlignment="Center" 

Margin-"12 18 0 0" 

IsHitTestVisible="False" /> 

</Grid> 

</UserControl> 

阌形 Polygon '-J Polyline 类似，只+过前 荇能够 14 动闭合图形，然 P 使川 Fill 厲性指定 
的_笔来填充内部区域。 
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此程序订阅了 Thumb 的 DragStarted 和 DragDelta 事件。这个 Thumb 之上有两个元素 
( Border 和 TextBlock ), 在视觉上遮住了 Thumb . 但这两个元素的 IsHitTestVisible 厲性被设 
置为 false . 因此二者不会拦截到达 Thumb 的触摸输入。 

Border 的 BorderBrush 属性被绑定至根元素的 BorderBrush 属性。您或许还记得， 
BorderBrush 属性是 Control 类定义的.也被 UserControl 继承，能够传播至整个可 视树。 
TextBlock 的 Foreground 厲性能够自动获取这个画笔。 TextBlock 的 Text 属性与这个用户控 
件的 Text 属性绑定。 UserControl 并没有定义 Text 属性，这说明该属性可能是另行添加的。 
代码隐藏文件证实了这一假设。这个 Text 厲性是以依赖属性的形式定义的。 

项 H: AlphabetBlocks I 文件： Block.xaml.cs 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Controls.Primitives; 


namespace AlphabetBlocks 


public sealed partial class Block : UserControl 
static int zindex; 


static Block() 

{ 

TextProperty = DependencyProperty.Register("Text", 
typeof(string), 
typeof(Block ), 
new PropertyMetadata( n ? w )); 


public static DependencyProperty TextProperty | private set; get ;) 


public static int ZIndex 

( 

get { return ++zindex; } 

) 

public Block 0 

{ 

this.InitializeComponent(); 

) 

public string Text 

( 

set ( SetValue(TextProperty, value); \ 

get I return (string)GetValue(TextProperty); } 


void OnThumbDragStarted(object sender, DragStartedEventArgs args) 

( 

Canvas.SetZIndex(this, ZIndex); 


void OnThumbDragDelta(object sender, DragDe1taEventArgs args) 

I 

Canvas.SetLeft(this, Canvas.GetLeft(this) + args.HorizontalChange); 
Canvas.SetTop(this, Canvas.GetTop(is) + args.VerticalChange); 


Block 类还定义了静态屈性 ZIndex , 这甩需耍特别说明一卜、当用户单击程序中的按 
钮后， Block 对象会被创违并添加至 Canvas 。 按 Block 在集合中出现的顺序，创迚的 Block 




会显示在先创建的 Block 之上。而实际上,我们希望在手指点击 Block 之后,它能够显示 
在屏嵇的最上 层。 也就是说，它的 z - index 值应大 于其他 Block 。 

静态的 Zlndex 属性能够实现这 行 为。这个值毎次返回前都会 U 增。 DragStarted 淇件 
被引发说明 W 户点击 J ■某个 Blocko Canvas . SetZIndex 方法会为当前 Block 分配-个卨 丁其 
他 Block 的 z - index 值。在 Zlndex 属性达到最大值后，程序会出错。但实际上这种情况难 
以 发生 - (Windows Runtime 所支持的最大 z - index 值为1 000 000。也就是说，如果每秒钟 
移动一次字母块，那么程序运行到第12天才会抛出异 常。） 

Thumb 的 DragDelta 'JJ 件会 M 过 HorizontalChange fll VerticalChange 屈性通知程序触摸 
点或鼠标指针相对该控件移动的距离。我们 " j 以宵接使用这两个属性来累加附加 M 忭 
Canvas. Left Canvas.Top 。 

木小例的 MainPage . xaml 文件颇力简中 .， 接木 h 只是在屏辂中央 M 小程 序的名称。 

项 AlphabetBlocks | 文件： MainPage.xaml ( 片段 > 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
SizeChanged="0nGridSi2eChanged"> 

<TextBlock Text= M Alphabet Blocks" 

FontStyle="Italic" 

FontWeight="Bold" 



TextWrapping="Wrap" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

TextAlignment="Center" 

Opacity="0.1" /> 

<Canvas Name="bu11onCanvas" /> 

<Canvas Name="blockcanvas" /> 

</Grid> 

请注意，这 1 & 订阅 TGrid 的 SizeChanged 事件。当页面尺、 j •变化时，相应的处理程序 
能够歌新创述所有 Button 对象，使其环绕在屏痛四周。代码隐藏类的大部分代码都 是力了 
实现这个效果。 

项 R: AlphabetBlocks | 义件： MainPage.xaml.cs(Vi 段 } 
public sealed partial class MainPage : Page 
{ 

const double BUTTON_SIZE = 60; 
const double BUTTON 二 FONT = 18; 

string blockChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?-+*/*="; 

Color 【】 colors = ( Colors.Red, Colors.Green, Colors.Orange, Colors.Blue, Colors.Purple I; 
Random rand = new Random(); 


public MainPageO 






itLeft (buttoi 
Top (button 




Canvas.SetTop(button, this.ActualHeic 
buttonCanvas.Children.Add(button); 




Add(button) 
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Block 对象是在 Button 的 Click 事件处理程序中创建的。该处理程序会将其随机 S P 屏 
幕上的某个位置。读者岢以尝试通过摆放字母块得到一个特别的 Hello Windows 8程序(如 
下图所示)。 















第 6 章 WinRT 与 MVVM 

“概念隔离”是软件开发最重要的原则之一。大型应用程序最好分层进行开发、调试 
和维护。在交 a 性较强的图形环境中，内容的表示与内容本身的分离是最显著的。表示层 
是程序 M 示控件(和其他图形)及与用户交互的部分。表示层下面是业务逻辑与数据提供 
程序。 

为帮助开发荇认识和实现概念隔离，一些架构模式应运而生。在基于 XAML 的编程环 
境中，“模型-视图-视图模型” （ Model - View - ViewModel ， 简称 MVVM ) 颇受欢迎。在 MVVM 
模式 K , XAML 吋用來实现表示层，然后通过数据绑定和命令将表示层与底层业务逻辑关 
联起来。 

U 木彳5类似，很多朽緒一般都通过一些小程序来演示某种功能或概念。为适应某种架 
构模式， 小柷序 往往会变得臃肿。 MVVM 对小程序来说不但大材小用，还讨能容易让人 
混淆。 

数据绑定和命令是 Windows Runtime 的® 要组成部分。理解这两个概念有助于理解 
MVVM 架构的实现方法。 

6.1 MVVM 简介 

颐名思义，采用“模型-视图-视图模型” （ Modd - View - ViewModel , 简称 MVVM ) 模式 

的应用程序一般分为三层。 

• “模增”是处理数据和原始内容的层次。该层次一般用来获取和维护来自文件或 
Web 服务的数据。 

• “视图”是控件和图形的表示层， 一 般通过 XAML 实现。 

• “视图模甩” 位于 “模型”和“视图”之间。一般情况下，该层次负责使来自“模 
哦”的数据或内容史易于在“视图”中呈现。 

“模型”层一般小可或缺，但本章的示例程序不涉及这部分。 

如果三个 M 次间的交互是通过过程式的方法调用实现的，那么调用层次■能是这 样的： 

"MW" - "WIWfS'B- - ” 税 1 B" 

除 / 亊件，反方向的调用是违背设计原则的。“模型”可以定义供“视图模型”订阅 
的事件，“视图模型”可以定义供“视图”订阅的事件。車件允许“视图模型”通知“视 
阁”数椐被史新，而“视图” uj •以通过“视图模型”来获取最新的数据。 

“视图”和“视图模型”之间一般是通过数据绑定和命令来交互的。也就是说，大部 
分(甚辛: 全部) 方法调用和事件处理实际是在嵇后进行的。数据绑定和命令吋以实现以下三 
种交互场景。 

• “视图”将用户输入传给“视图模型”。 
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• “视图模型”在数据被更新后通知“视图”。 

• “视图”从“视图模型”获取用于呈现的最新数据。 

简化代码隐藏文件的代码(至少在页面和窗口—级)是 MVVM 的 tl 标之 一 。 S 理想的情 
况是“视图” 3 “视图模型”完仝通过 XAML 文件定义的数据绑定来建立 关联。 

6.2 数据绑定通知 

第5章介绍过这样的数据绑定。 

<TextBlock Text= H {Binding ElementName=slider, Path=Value}" /> 

这个绑定发生在两个 FrameworkElement 派生类的对象之间,绑定口标是这个 TextBlock 
的 Text 属性，绑定源是 Slider 对象的 Value 属性，对象名为 slider 。 这里的绑定 tl 标和源均 
是以依赖属性方式实现的 厲性。 绑定 tl 标必须是依赖属性，但绑定源不必是 (IT. 如接下来要 
展示的)。 

TextBlock Wd ; •的文本随 Slider 的 Value M 性变化而 变化。 这是如何实现的？若绑定源 
是依赖属性，洁的机制则取决丁 Windows Runtime 的实现。毋庸胥疑.此时会引发某个 
寧件。 Slider 具有能够在 Value 属性变化时进行通知的事件，而 Binding 对象会订阅该事件。 
在事件发生时， Binding 对象会将最新的 double 值转换为 string . 并将结果设胥到 TextBlock 
的 Text 厲性。如果知道 Slider 拥有公共的 ValueChanged 1{件，并 fl 该事件能够在 Value 
属性变化时被引发，那么这个过程就+难理解了。 

对于“视图模甩”，数据绑定的一端发生了 变化： 绑定的目标仍旧是 XAML 文件中的 
元索，但绑定源变成“视图模型”的属性。这就是“视图模型”和“视图” ( XAML 文件> 
之间来回传输数据的基本方式。 

绑定源+必是依赖属性，但为 r 使数据绑定能够正常工作，绑定源必须实现某种通知 
机制，以便在属性变化时通知 Binding 对象。这种通知并不是凭空发生的，必须通 过琪件 
来实现。 

作为绑定源的‘‘视图模型” 一般需要实现 System . ComponentModel 命名空间中的 
INotifyPropertyChanged 接口。该接口的定义非常简中-。 

public interface INotifyPropertyChanged 

( 

event PropertyChangedEventHandler PropertyChanged; 

) 

PropertyChangedEventHandler 委托在签名中使用了 PropertyChangedEventArgs 类。该类 
定义了一个名为 Property Name 的属性，类型力 string 。 实现 INotifyPropertyChanged 的类 
要在属性值变化时引发该接口的 PropertyChanged 事件。 

下面是一个实现 INotifyPropertyChanged 的类。 TotalScore 厲性会在它的值发牛:变化时 
引发 PropertyChanged 車件。 

public class SimpleviewMode1 : INotifyPropertyChanged 
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public double TotalScore 
{ 

set 


if (totalScore !* value) 

{ 

totalScore =» value; 
if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs("TotalScore")); 


TotalScore 属性后面对应一个名为 totalScore 的字段》这个属性会将传入 set i •方问器的 
值 U totalScore ■•段进行 比较。 如有不同，则引发 PropertyChanged 事件。 沾斗 ; 要图一时省 
事而省略这个步骤！这个事件名为 PropertyChanged , 而非 
PropertySetAndPerhapsChangedOrMaybeNot 1 » 

S 然系统允 I 午实现 INotifyPropertyChanged 接口的类 总是+ 引发 PropertyChanged 虫件， 
但+应这样做。 

若类中存在较多属性.则有必要定义一个受保护、名为 OnPropertyChanged 的方法， 
并通过该方法来引发 事件。 此过程还可以6动执行，正如稍后要介绍的。 

在设汁‘‘视图”和“视图模型”时，应考虑将控件看作数据类型 的町视 化表示。“视 
阁”中的控件通过数据绑定与“视图模型”的 M 性进行关联。例如，将 Slider 看作 double 
的可视化表示，将 TextBox 与 string 对应,将 CheckBox 和 ToggleSwitch 与 bool 对应，将 
一组 RadioButton 控件 与特定 的枚举类戢对应。^ 


6.3 ColorScroli 的视图模型 


第5章介绍的 ColorScroli 程序演水了如何通过数据绑定将 Slider 的 Value 属性更新到 
TextBlocko 但通过定义数据绑定来根据 ：个 Slider 的值来史新颜色则遇到鸣困难。这 uj ■以 
办到吗？ 

我们可以通过一个 中独的 类根据 Red 、 Green 和 Blue 属性来创建 Color 对象。 这二个 
属性中的任意■■个发牛.改 变都® 新计算 Color 属性。在 XAML 文件中，将三个 Slider 控件 
分别与 Red 、 Green 和 Blue 属性绑定，将 SolidColorBrush 与 Color 属性绑定。即便没有明 
说这个类是“视图模型”，但它的确承拘了这个角色。 

在示例项 U 中 ， RgbViewModel 类实现了 INotifyPropertyChanged 接口，能够在 Red 、 
Green . Blue 和 Color 属性改变时引发 PropertyChanged 事件。 


① 评 注： 这个名称的屮件井不疗在 . ini 只足为了捉此 >|( 件， ;| 发 b.j« 性值 a 被 as 并 n 发生了改变 . 不能栈 梭两吋 • 

② 谇 注： 我们的以将 "ww 校切 ” 呑作 “ 《阌 ” 的袖象。也就足将投吧 ” # 作可以 m 过代 h 操纵的 “ 《阁 ” • -MM" 
的数 1KW 衣观的行为在 ■•ftllWW-fr 屮 ® 能找到对应的成 w. 
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项月 ： ColorScrollWithViewModel | 文件： RgbViewModel.es 
using System.ComponentModel; // for INotifyPropertyChanged 

using Windows.UI; // for Color 

namespace ColorScrollWithViewModel 
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if (color != value) 

( 

color = value; 
OnPropertyChanged("Color"); 

} 

) 

get 

( 

return color; 



this.Color - Color.FromArgb(255, (byte)this.Red, (byte}this.Green, (byte)this.Blue); 


protected void OnPropertyChangecMstring propertyName) 

( 

if {PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 


这个炎 iS 后的 OnPropertyChanged 方法接受属性的名称并进而引发 PropertyChanged 
事件。 

为了使用数据绑定， Red、Green Blue 厲性的类型被定义为 double 。 这三个属性可 
以算作“视图模型”的输入。由于输入很可能来自 Slider , 因而选用 double 类型可以更好 
地实现对接。 

Red、Green Blue 厲性的 set 访问器会在值发生变化后引发 PropertyChanged 事件并 
调用 Calculate 方法。 Calculate 方法会珉新设胃 Color 属性，而这会再一次引发 
PropertyChanged 辦件 来通知 Color 属性发生了变化。 Color 属性本身有一个受保护的 set 访 
问器，这表明该类并非反过来根据 Color 值来汁算 Red 、 Green 和 Blue 属性。（稍后会继续 
i 、 J ■论这个问题。） 

RgbViewModel 类是 •例项 ColorScrollWithViewModel 的一部分。该类在 
MainPage . xaml 文件的 Resources 区段被实例化。 


项 H : ColorScrollWithViewModel | 文件： MainPage.xaml ( 片段 > 
<Page.Resources 〉 


<local:RgbViewKodel 
c/Page.Resources 〉 


:: Key " r gbViewMode 1" 


/> 


请注意，这叭使用 local 来指定命名空间。 

使 XAML 文件能够访问“视图模对象有两种简申方法。其中之一是将该对象作为 
资源。11:如第2章介绍的，在 Resources 区段引用的类只会被实例化一次，供所有 
StaticResource 引用共享。多个绑定引用一个对象的情况，都町以如法炮制。 

三个 Slider 控件大致相同，这里展示其中一个即 iij » 

项 R: ColorScrollWithViewModel | 义件： MainPage.xaml ( 片段） 

<! — Red -- > 

<TextBlock Text="Red" 

Grid•Co1umn="0" 

Grid.Row= M O n 
Foreground="Red" /> 
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Value-"(Binding Source*{StaticResource rgbViewModel ), 
Path=Red, 

Mode=TwoWay} *' 



<TextBlock Text= M IBinding Source={StaticResource rgbViewModel}, 
Path=Red, 



Grid.Column= M 0" 



谘注意， Slider 元素+冉需耍 Name 特性，因为 XAML 中没有其他元素引用它，代码 
隐藏文件中也+需要引用它。上一个版木中的 ValueChanged If 件处理程序也+冉需要 了。 
代码隐藏义件只包含对 InitializeComponent 方法的调用。 

请特别注意一下 Slider 上绑定的定义。 



Value= M {Binding Source=IStaticResource rgbViewModel}, 
Path=Red, 



这个绑定定义略长， W 而把它拆分成二行。这<11不需要指定 ElementName , W 为绑定 
没有引用 XAML 文件中的其他元素。它引用的是以 XAML 资源形式实例化的对象，因而 
必须通过 Source 和 StaticResource 语 法来进行引用。这个绑定的 U 标为 Slider 的 Value If 4 性， 
源为 RgbViewModel 实例的 Red 属性。 

数据如何传至“视图模甩”？难道 Slider 不耑耍向 RgbViewModel 传值？ 

耑要， 但是 RgbViewModel 必须作为绑定源，而+能是0标。这个“视图模型”不能 
作为绑定 U 标是因为它没有依赖属性。尽管表 Ifii 上 Slider 的 Value 厲性是绑定 Id 标，但实 
际上我 们希頦 Slider 将值传给 Red 属性。为此， Binding 的 Mode 厲性被设1!为 TwoWay 。 
此设 S 意味着以 F 两点。 

• 源属性被更新促使 U 标属性随之史新(数据绑定的-般情 况〉。 

• u 标值被更新促使源诚性随之更新(这 m 所讨论的茧 点)。 

Mode 属性的默认设 H 为 OneWay 。 还有一个选项为 OneTime , 总为仅在绑定建立之初 
将绑定源史新到绑定 1;1 标。在 OneTime 模式 K , 如果源属性发生后续的更改，则+会进行 
U 标的史新。若绑定源没有通知机制，则可以使用 OneTime 模式。 

还需要注意， TextBlock 在这个示例中也被绑定至 RgbViewModel 对象。 

<TextBlock Text="{Binding Source=IStaticResource rgbViewModel), 

Path=Bed, 

Converter®{StaticResource hexConverter)}" ... /> 

此元索的绑定可以像之前的示例项目•样直接引用 Slider , 但引用 RgbViewModel 吏为 
吋取。默认的 OneWay 模式在这里适用是因为只需要将值从源传给〖 I 标。 

SolidColorBrush 的 Color 属性的绑定也可以采用 OneWay 模式。 

项目： ColorScrollWithViewModel | 文件： MainPage.xamU 片段） 

〈Rectangle Grid.Column="3" 

Grid • Row "0" 

Grid.RowSpan="3"> 

〈 Rectangle.Fill> 


<SolidColorBrush Color= •• 丨 Binding Source={StaticResource rgbViewModel), 

Path=Color}" /> 



SolidColorBrush 不再需要 x : Name 特性， _ 为我们不需要在代码隐藏文件中引用该 
M 笔。 

当然，相比从代码隐藏文件移除的 ValueChanged 車件处理程序， RgbViewModel 类中 
的代码耍更多一些。正如前文所提到的， MVVM 对小程序来 说有些 臃肿。对于大 哦应用 
程序，起初为获得更淸晰的架构的确要份出一定的代价，但将表示与业务逻辑分离是长远 
之举。 

RgbViewModel 类中， Color 属性的 set 访问器被定义为受保护的，因而只能在类内部 
访问它。有人或许会问，这样做有必要吗？或许 hJ ■以这样 设计： 外界对 Color 属性进行修 
改后使 Red 、 Green 和 Blue M 性被重新 汁算。 



OnPropertyChanged("Color"); 
this•Red = color.R; 



乍一看这是 fl 找麻烦，因为这会导致属性和 OnPropertyChanged 方法不断递归。但这 
种情况实际+会发生，如果厲性值未发屮改变， set 访问器不会进行任何操作，因而这样做 
是安全的。 

但这柞做还是有缺陷的。举例来说，若 Color 属性当前为 RGB 值(0,0, 0), 但被设 S 为 
(255, 128, 0), 当 Red 属性被 设賢为 255, PropertyChanged 事件会被引发， Color (和 color 
字段) 被设置为(255, 0, 0>，最终 Green 和 Blue 会被设置为0。 

b 其试图防 lh 重入 ( re - entry ) 的发生，不如通过逻辑匕的修改来实现 M 初的目标。卜面 
这个版本吋以 I :作，即便它会使 PropertyChanged U 件“泛起一些涟漪”。 

public Color Color 



color = value; 


OnPropertyChanged("Color"); 
this.Red = value.R; 







本章将在此程序的卜 一个版 木中将 Color 属性的 set 访问器定义为公共的。 


6.4 精简的语法 

通过前文展示的 RgbViewModel , hJ ■能让人觉得实现 INotifyPropertyChanged 是•件繁 
琐的車。的确如此。为简化这一•过程 ， Visual Studio 会在 “ N 格应用程序”和“拆分视图 
应用程序”的 Common 文件夹屮创建 BindableBase 类。（请勿将 BindableBase 类 1 j Binding 
的父类 BindableBase 类混浓。） 

Visual Studio 不会为“空 fl 应用程序”创建 BindableBase 类。我们+妨读一下这个类 
的代码，看看从中能够亇到什么。 

BindableBase 类所处命名空间的名称由项 H 名、句点和 Common 组成。 卜面是 去掉注 
释和部分特件 ( attribute ) 后的代码。 

public abstract class BindableBase : INotifyPropertyChanged 
( 

public event PropertyChangedEventHandler PropertyChanged; 


protected bool SetProperty<T>(ref T storage, T value, 
[CallerMemberName 】 String propertyName = null) 



protected voi'd OnPropertyChanged([CallerMemberName) string propertyName = null) 
{ 

var eventHandler = this.PropertyChanged; 
if (eventHandler != null) 

{ 

eventHandler(this, new PropertyChangedEventArgs(propertyName)); 


派牛 .丁- BindableBase 的类 UT 以在属件的 set 访问器中调用 SetProperty 方法 。 SetProperty 
方法的签名 lii 然看起来有些复杂，使用起来却很简单。例如，对丁-名为 Red 、%mj double 
的属性， uj ■以像 K 而这样定义其背后的字段。 

double red; 

在 set 访问器中调用 SetProperty 的方法如 K 所示。 

SetProperty<double>(ref red, value, "Red"); 

迠注总 BindableBase 中 CallerMemberName 的使用。此特性 ( attribute ) 是 .NET 4.5 引入 
的， C # 5.0 吋以通过它来获取主调属性或方法的信息。巾于利用了此特性，所以调用 
SetProperty 一般小必指定最后一个参数。如果在 Red 属性的 set 访问器中像 卜面这 样调用 



SetProperty . M 性名就会被&动设 H 。 



如果属性值实际被更改， SetProperty 会返回 true 。 若希望针对新值进一步执行某种逻 
辑，贝 I 何以利用这个返回值。接下来要介绍的¥例项 U 名为 ColorScrollWithDataContexto 
此项 U 也包含-个 RgbViewModel 类，但它借用了 BindableBase 中的一些代码。在这个项 
U 中， Color 厲性的 set 访问器被声明为公共成员。 

项 H: CoIorScrollWithDataContext | 文件： RgbViewModel.cs 

using System.ComponentModel; 

using System.Runtime.CompilerServices; 



namespace CoIorScrollWithDataContext 


public class RgbViewMode1 : INotifyPropertyChanged 
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( 

if (SetProperty<Color>(ref color, value)> 



this.Color * Color.FromArgb(255, (byte)this.Red, (byte)this.Green, (byte)this.Blue); 


protected bool SetProperty<T>(ref T storage, T value, 

[CallerMemberNarae] string propertyName = null) 
I 

if (object.Equals(storage, value)) 



storage = value; 

OnPropertyChanged(propertyName); 
return true; 

) 

protected void OnPropertyChanged(string propertyName) 

{ 

if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 


这种实现 INotifyPropertyChanged 的方法更简洁。下一节要介绍的 
ColorScrollWithDataContext 项 EI 会采用这个版木的 RgbViewModel 。 


6.5 DataContext 属性 

到 U 前为止，本书介绍了三个为绑定指定源对象的选项： ElementName、RelativeSource 
和 Source 。 ElementName 适合引用 XAML 内部的元素， RelativeSource 使绑定能够引用 tl 
标对象的属性。（第11章会介绍 RelativeSource 另一种 L 要的作用。）第 二 •个选项 Source 
—般 1 -j StaticResource 联用来 i 方问 Resources 集合中的对象。 

还有—种指定绑定源的方法：如果 ElementName > RelativeSource 和 Source 均、 J、j null ， 
Binding 对象会选择 0 标对象的 DataContext 属性。 

DataContext 属性是 FrameworkElement 定义的。 它有个 有趣 （ H 耍)的性质， 即其仿 
能够传播伞:整个町视树。像这样传播的属性并不多，其中包括 Foreground 和所有勺字体相 
关的属性，但鲜有其他属性。 DataContext 是一个特例。代码隐藏类的构造函数呵以用来实 
例化视图模型，并将该实例设 S 到页面的 DataContext 厲性 h 。氺例项 U 
ColorScrollWithDalaContext 的 MainPage . xaml.cs 文件是这样做的。 






项 R: ColorScrollWithDataContext I 文件： MainPage.xaml.es ( 片 段） 
public MainPage() 


this.InitializeComponent(); 
this.DataContext = new RgbViewModel(); 

// Initialize to highlight color 
(this.DataContext as RgbViewModel).Color = 

new UlSettings().UIElementColor(UIElementTyp>e.Highlight); 

) 

选择在代码中实例化视图模型的原因町能有很多。例如，视图模型有一个含参构造函 
数。这样的对象 XAML 是无法实例化的。 

为了测试 Color 属性，这里将其设置为系统的高亮颜色。 

使用 DataContext 的好处之一是数据绑定语法得到了简化。巾于不羔要 再设筲 Source , 
因而绑定标记可以像下面这样写。 

<Slider ••• Value-"(Binding Path=Red, Mode=TwoWay>" ... /> 

如果 Path 设胥是绑定标记的第一个屈性，不可以省略 Path=o 

<Slider ... Value*"(Binding Red, Mode=TwoWay)" ... /> 

这样， Binding 语法便得到进一步简化。 

+论选择哪种绑定源， Path = 都吋以 省略，但前提是 Path 是绑定语法中的第一个属性。 
本人倾向-丁•将 Source 或 ElementName 作为第一个属性，而在使用 DataContext 时才省略 
Path :。 

下面这段 XAML 标记展示了新语法的使用方法。由于它们变得非常简中 .， 因而不再耑 
要拆成多行展示。 

项目 ： ColorScrollWithDataContext | 文件 ： MainPage .xaml ( 片段 > 

<!•- Red -- > 

<TexCBlock Text="Red" 

Gr id. Column=" 0 •• 

Grid.Row-"0" 

Foreground="Red" /> 



Value="{Binding Red, Mode=TwoWay) 
Foreground="Red" /> 




<Page•Resources 〉 
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<local : RgbViewModel x:Key-"rgbViewModel" /> 

</Page.Resources 〉 

同时，在可视树开始的某处设置 DataContext 属性: 

<Grid "• DataContext*"{StaticResource rgbViewModel}" 


或 


<Grid DataContext="(Binding Source-{StaticResource rgbViewModel})"... > 

如果希望将 DataContext 设置为“视图模型”的某个属性，而非“视图模型”本身，则 
需要用第二种方式。第11章在讨论集合时会展示更多示例。 


6.6 绑定与 TextBox 


将底层业务逻辑隔离，好处之一是能够在+使用“视图模型”的情况下构建用户界曲。 
假设需要一个类似 ColorScroll 的颜色选择程序，但每种颜色是在 TextBox 中输 入的。 虽然 
这样的程序难以使用，但的确是 uJ ■以实现的。 

不例项 tl ColorTextBoxes 采用了 ColorScrollWithDataContext 项 tl 的 RgbViewModel 类。 
两个项0代码隐藏类的构造函数也是一致的。 

项 FI: ColorTextBoxes | 义件： MainPage.xaml .cs (片段 > 
public MainPage() 

{ 

this.InitializeComponent(); 

this.DataContext = new RgbViewModel(); 


s RgbViewModel).Color = 

UlSettings().UIElementColor(UIElementType.Highlight); 


XAML 文件实例化了三个 TextBox 控件，并将其分别与 RgbViewModel 的 Red、Green 
和 Blue 属性进行了绑定。 

项 R: ColorTextBoxes I 文件： Ma inPage.xaml < 片段} 

<Page ...> 



<Style TargetType="TextBlock"> 

<Setter Property="FontSize" Value= n 24" /> 

〈Setter Property="Margin" Value="24 0 0 0" /> 

<Setter Property="VerticalAlignment" Value="Center" /> 
</Style> 


<Style TargetType="TextBox"> 



</Style> 

</Page•Resources 〉 

<Grid Background 3 "{StaticResource ApplicationPageBackgroundThemeBrush)"> 



〈 /Grid.ColumnDefinitions 〉 
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〈Grid Grid.Column="0"> 
<Grid.RowDefinitions> 

〈RowDefinition Height:"Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 


<Grid.ColumnDe£initions> 


<Column 

<Column 


Definition Width="Auto" 
Definition Width*"* w /> 


</Grid.ColumnDefinitions 〉 


/> 


<TextBlock Text="Red:" 

Grid.Row= H 0" 

Grid.Column="0" /> 

<TextBox Text="(Binding Red, Mode=TwoWay)" 
Grid.Row="0" 

Grid•Column*"1" /> 


<TextBlock Text="Green: •• 

Grid.Row="l" 

Grid.Column= w O" /> 

〈TextBox Text="{Binding Green, Mode=TwoWay) 
Grid.Row="l" 

Grid.Column:"1" /> 


<TextBlock Text="Blue:" 

Grid.Row="2" 

Grid.Column="0" /> 

<TextBox Text="{Binding Blue, Mode=TwoWay} 
Grid.Row="2" 

Grid.Column= M l" /> 

</Grid> 


<!-- Result --> 

<Rectangle Grid.Column="1"> 

〈 Rectangle•Fill> 

<SolidColorBrush Color="{Binding Color}" /> 
〈 /Rectangle.Fill> 



</Grid> 

</Page> 

程序运行后，每个 TextBox 控件将会呈现具体色值(参见下图)。所有必要的数据类型 
转换发生在幕肜。 






点击其中的某个 TextBox 并填入其他 数值。 什么都不会发生。申击另一个 TextBox , 
或按 Tab 键将输入焦点切换至下一个 TextBox 。 这时，最初在 TextBox 中输入的数宁•才被 
接受并用 P 更新屏幕右侧的 颜色。 

我们在测试此程序的过程中会发现 Windows Runtime 默许字符串中出现字母和符号， 
而不会抛出任何异常，并且在 TextBox 中输入的新值只有在该控件失去焦点后才牛效。 

这两个行为是有意而为之的。平例来说，假设有一个绑定到 TextBox 的“视图模型” 
要用到一个“模喂”。这个“模型”通过 M 络连接来更新数据库^用户向 TextBox 键入文 
本的过程中能会出现某些错误并退格)，我们显然不希望每次按键部得进行 M 络请求。 
正因如此，仅当 TextBox 失去焦点时，程序才认为 TextBox 的输入己完成，并可以进行后 
续 处理。 

不幸的是， fcl 前还没有修改这一行为的选项，也没有任何方法可以在数据绑定过程中 
进行数据验证。如果 TextBox 的绑定行为是不可接受的，并且希望通过自定义的控件来 
绕过 TextBox 的这种行为，最现实的选择就是弃用数据绑定，而用 TextChanged 事件处理 
程序。 

示例项目 ColorTextBoxesWithEvents 展示了这种方法此项目沿用了之前的 
RgbViewModel 类。 XAML 文件中 TextBox 控件被命名并订阅 TextChanged 负件 处理程 
序，其余与前一个示例一致。 

■ : ColorTextBoxesWithEvents I 文件： MainPage.xaml ( 片段 > 

<TextBlock Text="Red: 



TextChanged="OnTextBoxTextChanged" /> 


Rectangle 仍然像前一个示例那样采用数据绑定方式来获得更新。 
rtlT 这里替换了之前的双向数据绑定，所以我们+仅需要订阅 TextBox 的事件，也需 
耍订阅 RgbViewModel 的 PropertyChanged 事件。“视图模型”的域性发牛.变化时史新 
TextBox 的逻辑非常简中 .， 但这甩增加了对用户输入进行验证的逻辑。 
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项 H: ColorTextBoxesWithEvents | 义件： MainPage.Jcaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
{ 

RgbViewModel rgbViewModel; 



Brush textBoxErrorBrush - new SolidColorBrush(Colors.Red); 
public MainPage <) 



II Get TextBox brush 

textBoxTextBrush = this.Resources["TextBoxForegroundThemeBrush"] as SolidColorBrush; 

// Create RgbViewModel and save as field 
rgbViewModel = new RgbViewModel(); 

rgbViewModel.PropertyChanged += OnRgbViewMode1PropertyChanged; 
this.DataContext = rgbViewModel; 

// Initialize to highlight color 

rgbViewModel.Color = new UlSettings().UIElementColor(UIElementType.Highlight); 


void OnRgbViewMode1PropertyChanged(object sender, PropertyChangedEventArgs args) 

( 

switch (args.PropertyName) 



redTextBox.Text = rgbViewMode1.Red.ToSt ring("FO"); 



greenTextBox.Text = rgbViewModel.Green.ToString("FO"); 



case "Blue" : 

blueTextBox.Text = rgbViewMode1.Blue.ToString("FO"); 
break; 


void OnTextBoxTextChanged(object sender, TextChangedEventArgs args) 

byte value; 

if (sender = redTextBox && Validate(redTextBox, out value)) 
rgbViewModel.Red = value; 

if (sender == greenTextBox && Validate(greenTextBox, out value)) 
rgbViewModel.Green = value; 

if (sender == blueTextBox && Validate(blueTextBox, out value)) 
rgbViewModel.Blue = value; 

» 

bool Validate(TextBox txtbox, out byte value) 

( 

bool valid = byte.TryParse(txtbox.Text, out value); 

txtbox.Foreground = valid ? textBoxTextBrush : textBoxErrorBrush; 



Validate 方法通过标准的 TryParse 方法将文本转换为 byte 值。如果成功， “ 视图模型” 
的相应厲性会被更新。否则，文本呈现红色以表明存在错误。 

如果数字以空格或零开头.这段代码会出现一个小问题。如果在第一个 TextBox 中键 
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入0。这是一个有效的 byte . 因而 RgbViewModel 的 Red 属性会被更新为这个值，进而触 
发 PropertyChanged 方法，最终 TextBox 的 Text 属性会被设置为 “0”。到目前为止一切正 
常。再键入5。这时 TextBox 中显示 “05”。 TryParse 方法会认为这是一个有效的 byte 字 
符串，所以 Red ㈣ 性被吏新为 5 J r 0 pertyCh an ged 处理程序将 TextBox 的 Text 设置为 “5”， 
从而覆盖原来的 “05”。而且光标会跳到5的前面，而不会保持在它的后面。 

为解决这个问题，最好的办法是在 TextChanged 处理程序设置“视图模型”的属性期 
间忽略来自“视图模型”的 PropertyChanged 車件。使用一个标志即故到。 



void OnTextBoxTextChanged(object sender, TextChangedEventArgs args) 



有人或许希堪在 TextBox 失 i •输入焦点 后淸 理其中 ! aU ; •的文本。 

在某些情况下，数据验证更适合在“视阁模型”的上卜'文中进行，而不在“视图”层 
面进行。 


6.7 按钮与 MVVM 

介绍到这 m ， 为在一定程度 I :削弱对代码隐藏文件的依赖，读者吋能认为 MVVM 只 
对能够牛成值的控件有效 .. 而对按钮则无用武之地。 Button 能够引发 Click 爭件，但该車件 
必须在代码隐藏文件中处现。如果“视图模喂”要针对按钮实现某种逻辑(这 非常吋 能)， 
uj 以通过 Click 洱件处理程序调用“视图模甩”。这样做4;架构上是合理的，但实施起来 
却较为繁琐。 

幸运的是，有一种替代 Click 事件的机制吋以很好地配合 MVVM 使用，我们一般称其 
为“命令接 口”。 ButtonBase 定义了名为 Command (类型为 ICommand} 和 
CommandParameter (类彻为 object) 的属 ft , 能够使 Button 通过数据绑定调用“视 图模喂 ”。 
Command 和 CommandParameter 均为依赖属件，因而 Kf 以作为绑定 LI 标。 Command 属件总 
是作为数据绑定的 0 标，而 CommandParameter 是吋选的。 iTi •者吋在多个按钮绑定 到同一 
个 Command 对象时对按钮加以区分，作用类似？ Tag 厲性。 

假设有一个汁算器程序，计算器的引笮通过“视图模璀”实现，并将它设宵到 
DalaContext 诚性上.“ + ”（加法)命令的按钮吋以在 XAML 中这样实例化。 

<Button Content-"^" 

Command="{Binding CalculateCommand) M 
ComnandParameter= ,, add n /> 



“视图模型”有一个名为 CalculateCommand 、 类型为 ICommand 的属性，可以像下面 
这样定义。 

public ICommand CalculateCommand { protected set; get; } 

“视图模甩”必须初始化 CalculateCommand 属性，将其设 S 为实现 ICommand 接口的 
类的实例。这个接口的定义如下所示。 

public interface ICommand 

{ 

void Execute(object param); 

bool CanExecute(object param); 

event EventHandler<object> CanExecuteChanged; 

) 

当加法按钮被单击后， CalculateCommand 属性所引用的对象的 Execute 方法便会被调 
用，通过参数传入字符串 add 。 这就是 Button 调用“视图模咽”（史确切地说，应该是包含 
Execute 方法的类)的基本过 程。 

ICommand 接口的另外两个成员都包含 “can execute ” •样。从字面上理解，它与命令 
在特定情况卜的有效性有关。如果命令当前是无效的(如当前没输入数字，汁算器无法进行 
加法运 算)， 那么 Button 应被禁用。 

就本示例而言，幕后的逻辑是这 样的： XAML 在运行时被解析和加载后， Button 的 
Command 诚性会被彿定到 CalculateCommand 对象。 Button 会订阅该对象的 
CanExecuteChanged 事件.调用 CanExecute 方法并通过参数传入 add 。 如果 CanExecute 返 
回 false . Button 则会自动变为禁用状态。当 CanExecuteChanged 率件再次被引发 ， Button 
还会凋用 CanExecute . 如此往 M 。 

为在“视图模型”中使用命令.必须提供实现 ICommand 接口的类。然而，这个类很 
有可能需要访问“视图模型”中的厲性，也吋能有反方向的访问。 

那么有人 k ] ■能 会问： 这两个类否合：为一？ 

从理论上讲，这是可行的， 但前 提是同一页面的所有按钮都•以共用同一对 Execute 
和 CanExecute 方法。这耍求柯个按钮都必须拥有唯一的 CommandParameter . 以便这两个 
方法能够区分+同按钮。下 tfii 让我们了解一下在“视阁模喂”中使用命令的一般方法。 

6.8 DelegateCommand 类 

第5章介绍了一个名为 SimpleKeypad 的程序，它能够收集按键序列并生成格式化的文 
本。卜 Bn 让我们用新的方法来重写这个程序。“视图模甩”除了实现 INotifyPropertyChanged 
接口外，还要处理来拨号盘按钮的命令，通过命令来替代 Click s 件处理 程序。 

f " J 题在丁-，为使“视图模甩”处理按钮命令，它必须拥有一个或多个 ICommand 类甩 
的诚件 。这需 要- _ 个或多个实现 ICommand 接口的类。实现 ICommand 的类必须包含 Execute 
和 CanExecute 方法以及 CanExecuteChanged 负件。这些方法的内部必然耍 1 j “视图投:喂” 
的某些部分交迂。 

解决方案之一是在“视图模甩”中用+同名称定义所有 Execute 和 CanExecute 方法。 
然 / H , 我们通过一个实现了 ICommand 的类来调用“视图模型”中具体的 Execute 和 
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CanExecute 方法 <> 

这个类名为 DelegateCommando 通过杳阅资料会发现，这样的类有多种实现，其中包 
括微软 Prism 框架中的(此框架旨在帮助开发者在 Windows Presentation Foundation ( WPF ) 和 
Silverlight 中应用 MVVM )。 下面要介绍本人的实现。 

实现 ICommand 接口 意味着 DelegateCommand 类包含 Execute 和 CanExecute 方法和 
CanExecuteChanged 事件，但 DelegateCommand 仍需要另一个方法来引发此事件。我们不 
妨称这个额外的方法为 RaiseCanExecuteChangedo 为达到这个 14 的，我们首先定义一个派 
生于 ICommand 的接口，并添加这个方法。 

项目 ： KeypadWithViewModel | 文件： IDelegateCommand.cs 

using System.Windows.Input; 

namespace KeypadWithViewModel 

( 

public interface IDelegateCommand : ICommand 

{ 

void RaiseCanExecuteChangedo; 

) 

> 

DelegateCommand 类实现了 1 DelegateCommand 接口，并利用 了 System 空间中的几个 
简单(而实用)的泛型委托。这些预定义的委托的名称为 Action 和 Func , 拥有1到16个类別 
参数。 Func 委托吋以返回指定类型的对象，而 Action 委托无返回值。在示例程序中， 
Action < object > 委托代表接受中个 object 参数、返回 void 的方法(匹配 Execute 方法的签名)。 
Func < object , bool > 委托代表接受 object 参数、返回 bool 的方法(匹 Sil CanExecute 方法的签 
名)。 DelegateCommand 定义了这两个委托类型的字段，用于存储对应签名的方法。 

项 KeypadWithViewModel | 文件： DelegateCommand. cs 

using System; 

namespace KeypadWithViewModel 

i 

public class DelegateCommand : IDelegateCommand 


Action<object> execute; 



// Event required by ICommand 

public event EventHandler CanExecuteChanged; 

// Two constructors 

public DelegateCommand(Action<object> execute, Func<object, bool> CanExecute) 
{ 

this.execute = execute; 
this•canExecute = CanExecute; 
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II Method required by IDelegateCommand 
public void RaiseCanExecuteChanged() 

{ 

if (CanExecuteChanged != null) 

CanExecuteChanged(this. EventArgs.Empty); 


// Default CanExecute method 
bool AlwaysCanExecute(object param) 


这个类实现 r Execute 和 CanExecute 方法，但这些方法只是调用字段形式的委托。这 
两个字段通过类构造函数的参数设賈。 

假设计算器的 “ 视图模型 ” 有一个用 T 执行计算的命令，则可以这样定义一个 
CalculateCommand 厲性。 

public IDelegateCommand CalculateCommand { protected set; get; I 

“ 视图模取 ” 还需要可以定义 ExecuteCalculate 和 CanExecuteCalculate 方法。 

void ExecuteCalculate(object param) 


bool CanExecuteCalculate(object param) 


“ 视图模型 ” 类的构造函数吋通过这两个方法来实例化 DelegateCommand , 并将结果 
赋给 CalculateCommand 属性。 


this.CalculateConmand = new DelegateCommand(ExecuteCalculate, CanExecuteCalculate); 

了解实现命令的基木过程之后，下面让我们看看拨号盘的 “ 视图模型”。针对输入到 
拨号盘和出 拨弓盘 显示的文本， “ 视图模型 ” 分别定义名为 Inputstring 的属性和提供格式 
化文本的 DisplayText 属性。 

“ 视图模艰 ” 还定义了名为 AddCharacterCommand ( 用 F 输入所有数字及符号）和 
DeleteCharacterCommand 的属性，类型均为 IDelegateCommand 。 这两个属性会被初始化为 
DelegateCommand 对象。实例化 DelegateCommand 对象时会传入 ExecuteAddCharacter 、 
ExecuteDeleteCharacter 和 CanExecuteDeleteCharacter 委托。由于所有数 7 -和符号按键在任 
何情况卜都是有效的， W 而斗 ^ 需要定义 CanExecuteAddCharacter 方法。 

项 R: KeypadWithViewModel | 文件： KeypadViewModel.cs 
using System; 

using System.ComponentModel; 

using System.Runtime.CompilerServices; 


Windows 程序设计 ( 第 6 







string displayText = 
char [】 specialChars - I 


>； 


public event PropertyChangedEventHandler PropertyChanged; 


// Constructor 
public 


this.AddCharacterCommand - new DelegateCommand(ExecuteAddCharacter) 
this.DeleteCharacterCommand 3 

new DelegateCommand(ExecuteDeleteCharacter, CanExecuteDeleteChar 


// Public properties 
public string Inputstring 


protected set 

( 

bool previousCanExecuteDeleteChar 


this. CanExecutelDeleteCharact 



if (previousCanExecuteDeleteChar != this.CanExecuteDeleteChs 
this.DeleteCharacterCommand.RaiseCanExecuteChangecK); 



protected set { this.SetProperty<string>(ref displayText, value); 
( rf»rurn rii sol avTf=»xr : ) 




// Execute and CanCxecute methods 
void ExecuteAddCharacter(object param) 







gjW：'：.; ； ^„C:::”:'ST :。 -:.- 々 ,. 一’作 洛 - 一 - fnllT"fl^Sj'rll 


if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs(propertyNanve)); 


ExecuteAddCharacter 方法传入的参数 是用户 键入的字符。这就是多个按钮能够共用同 
一 个命令对象的原因。 

CanExecuteDeleteCharacter 只在有叫删除的字符的情况 F 才返回 true 。 如果没有字符， 
删除按钮应被禁用。这个方法在绑定刚违立时被首次调用， JT ； •续的调用发生在 
CanExecuteChanged 事件被引&时 。引 发此事件的逻辑位-丁 • InpulString 属性的 set 访 |’" j 器(比 
较输入字符串在修改前 G CanExecuteDeleteCharacter 的返回值)。 

XAML 文件将这个“视图模型”以资源的形式实例化，然后将其指定给 Grid 的 
DataContext 属性。 请注 , S 13个 Button 控件上的 Command 绑定的简化语法以及数宁•和符 
号键对 CommandParameter 属性的使用。 

项 R: KeypadWithViewModel | 文件： MainPage.xaml UV 段） 

<Page ...> 

<Page.Resources 〉 

<local : KeypadViewModel x:Key="viewMode1" /> 

</Page.Resources> 

<Grid Background*"(StaticResource ApplicationPageBackgroundThemeBrush)" 
DataContext«"{StaticResource viewModel)"> 

<Grid HorizontalAlignment="Center" 

VerticalAlignnvent="Center" 

Width="288"> 


<Grid.Resources> 

<Style TargetType="Button*'> 
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<Setter Property="ClickMode" Value=’’Press" /> 

<Setter Property*"HorizontalAlignment" Value="Stretch" /> 
〈Setter Property="Height" Value="72" /> 

〈Setter Property-'TontSize" Value= M 36" /> 


</Style> 



<Grid.RowDefinitions> 

<RowDefinition Height="Auto" /> 
〈RowDefinition Height:"Auto" /> 
〈RowDefinition Height="Auto M /> 
<RowDefinition Height*"Auto" /> 
<RowDefinition Height="Auto M /> 



<Grid.ColumnDefinitions> 

<ColumnDefinition Width-"*" /> 

<ColumnDefinition Width*"*" /> 

<ColumnDefinition Width-"*" /> 

</Grid.ColumnDefinitions> 

<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan= M 3"> 
<Grid.ColumnDefinitions> 

<ColumnDefinition Width="*" /> 

<ColumnDefinition Width-’’Auto" /> 

</Grid.ColumnDefinitions> 

<Border Grid.Column*"0" 



〈TextBlock Text="{Binding DisplayText)" 
HorizontalAlignment="Right" 
VerticalAlignment*"Center" 
FontSize^W /> 

</Border> 

<Button Content-"&#x21E6;" 

Command="{Binding DeleteCharacterCommand} 



FontFamily="Segoe Symbol" 

HorizontalAligrunent="Left" 

Padding= ,, 0 n 

BorderThickness-"0" /> 

</Grid> 

<Button Content®"1" 

Command 3 "{Binding AddCharacterCommand} 
CommandParameter="1" 

Grid.Row="l" Grid.Column- M 0 H /> 


<Button Content="#" 

Command®"{Binding AddCharacterCommand)" 

CommandParameter="#" 

Grid.Row=''4 H Grid.Column= ,, 2" /> 

</Grid> 

</Grid> 

</Page> 

这个项 U 的代码隐藏文件得到了极大的简化，只包含对 InitializeComponent 的调用。 
至此，大功告成！ 




第 7 章异 步 

现代应用程序+提侣频繁使用消息框 (message box ). 似要以敁寅接的方式获得$:要信 
息或得到“是”、“否”或“取消”之类的答复，使用消息框肯定更 it 人感到得心应手。 

Windows Runtime 支持通 H MessageDialog 类实现的消息框。这种消息框 M 多支持1个 
按钮，但按钮标签坷以任意修改。这个类没有 Show 方法，取而代之的是 ShcwAsync 方法- 

if ? 缀 Async 是 “ asynchronous ” （掉 步的)的 缩写。 这个 / Ti •缀在 Windows Runtime 中有非 
凡的含义。它+仅充当方法名称的一部分，而且改变了异步编程的方式，还改变了现代操 
作系统(如 Windows 8) 的编程思想。 

7.1 线程与用户界面 

'■j Windows V •期版本 k 的应用程序类似 ， Windows 8应用程序也是--种状态机 (state 
machine ) o 程序初始化完毕后，它会驻留 丁内# 等待某些 It 件的发斗:》屯件一般 ffl 来通知 
用户交 M ： 的发屮，有时也用來通知系统级别的变化(如屏嵇方向的变换\ 

程序应尽快处理車件，在完成处理后将控制权交还给操作系统，并继续等待其他 1 H 牛。 
如果程序无法快速完成事件处理，则 会处丁 •无法响应状态，进而惹恼用户。我们应使用户 
界 ifii 专用的线程尽燉处 F 空闲状态，个应使其承担繁 ® 的处现 任务。 

如果 Windows Runtime 中的菜个方法耑要耗费较长时间，该怎么办？这个问题是否应 
该由应用开发者来处理，使其在单独的工作线程上运行？ 

+ ,应用开发者没必要这柞做。在设计 Windows Runtime 时，微软的开发者匕筛选 ! li 
耍耗时辛:少50嚿秒才将控制权交给应用程序的方法 。 Windows Runtime 中大约有10%〜 
15%这样的方法。这些方法被设汁成异步的，以便在中独的工作线程中处理耗时的任务。 
这些方法在调 ffl / T ； 能够 、’ /:即返回，并在完成 JT ； 通知应用 程序。 

我们往往在文件 I / O 或访问 Internet 时会用到姑步方法。在调用 Windows 8中的对话框 
(如 MessageDialog 和本章要介绍的文件选抒对话框)时，也会用到异步方法 。 Windows 
Runtime 中所有异步方法的名称均带有 Async 后缀，并采用了相同的定义模式。幸运的是， 
借助 T - 强大的 . NET 类库和改进 / T ； 的 C # 编程语宵，异步方法用起来并不 困难。 

W 步编程在未来若干年是一项耑要我们牮捤的取 耍拈 术。对丁•过 太的消 费类计算机， 
所冇线程都在冋一个处理器 h 执行。操作系统负责对小 N 线程进行切换，使其表血 I :看是 
并行的。近些年的汁算机往往配备多个处理器(一般是具冇多核配贾的中.一芯片)。这种硬 
件允许在不同处现器 k 运行不同线程。 

某些繁 m 的汁算任务(如数纟 II 的处现以借助 r 多核处理器实现并行处观。力支持异 
步和并行处理， . NET 增加了 •种叫“基•任务的异步模式” （ Task-based Asynchronous 
Pattern . TAP ^ i ； 持， W 绕 System . Threading.Tasks 命名空间屮的 Task 类实现 。 Windows 
Runtime 应用程序可以通过 C # 和 Visual Basic 来使用 . NET 的这部分功能，这比直接使用 
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Windows Runtime 本身对异•步的持嬰容易得多。 

7.2 MessageDialog 的使用 

K 面让我们通过 MessageDialog 来初步认识一卜异步函数。 MessageDialog 的构造函数 
接受一个内容字符串和一个(可 选的) 标题字符串。默认情况卜只显示一个标有‘‘关闭”的 
按钮。这种默认的消息框可用丁•为用户提供某些重要信息。我们对以通过 UlCommand 对 
象 M 多定义三个白定义按钮。示例项0 HowToAsyncl 给了这样的一个例子。 

MessageDialog msgdlg = new MessageDialog("Choose a color", "How To Async #1"); 

msgdlg.Commands.Add(new UlCommand{"Red", null. Colors.Red)}; 

msgdlg.Commands.Add(new UlCommand("Green", null/ Colors.Green)); 

msgdlg.Commands.Add(new UlCommand("Blue", null, Colors.Blue)); 

UlCommand 构造函数的第一个参数用 r 指定按钮 hM 小的 文本，第三个参数为 object 
类喂，用丁•指定按钮的 ID , uj •以传入任何能够标识按钮的对象。这取选抒使用标签所对应 
的 Color 值来标识按钮。第:个参数稍后介绍。 

UlCommand 类实现 J * I UlCommand 接口 。 MessageDialog 通过 I UlCommand 来通知程 
序某个按钮被用户按 K 。 

ShowAsync 方法的调用按异步方式处理。此方法没有参数，并能够立即返回。消息框 
会在工作线程 fl 中执行。此方法■以像 K 面这样调用。 

IAsyncOperation<IUICommand> asyncOp = msgdlg.ShowAsync(); 

ShowAsync 会返回一个实现泛型接口 IAsyncOperation 的对象。泛唞参数为 
RJICommand 接口类型。这也就是说， MessageDialog 间接地返回了 1 UlCommand 类切的对 
象。该对象在消息框的按钮被按 K 并 R MessageDialog 消失前是不会返回的，但在调用 
ShowAsync 方法时 MessageDialog 尚未敁4)。〗卜:因如此， lAsyncOperation 也被石 •作一种“前 
景” ( future ) 或“许诺” ( promise)o 

lAsyncInfo 接口 定义 了 Cancel 和 Close 方法，还定义 / id、Status 和 ErrorCode 属性。 
lAsyncOperation < T > 接口派生自 IAsynclnfo 接口，并定义 Completed 属件，属性类 切为 
AsyncOperationCompletedHandler < T > 委托。 

我们需要在代码中将 Completed M 性设胥为某个回调方法。虽然 Completed 是属性， 
但它很像事件，能够在某些寧项发生 f 通知程序。（+同在 r , 車件町以有多个处理程序， 
而属性只能有一个。 ） 该属性的赋值方法如卜_所氺。 

asyncOp.Completed = OnMessageDialogShowAsyncCompleted; 

若程序中的某个方法调用了 ShowAsync 并将 Completed 属性设 W . 为坫个处理程序，那 
么这个处理程序将稍执行。调用 ShowAsync 方法的代码将控制器交给操作系统 
MessageDialog 才会显示。 

MessageDialog 在 V 门的线程上运行。 S 然程序的用户界面在 MessageDialog 敁示后被 
禁用，但程序的用户界面线程未被阻寒，仍然•以继续 T 作。 


①评 注： “工作线 w " 足相对 r “ ui 线柷”而, v 的. 


读#或许会 注总到 卜 阁中标 id 为 Red 的按钮4•其他按钮颜色的+同。这种样式代表该 
按钮是默认按钮，用户按下 Enter 键便 " j ' 触发。我们可以通过 MessageDialog 的 
DefaultCommandlndex 属件来指定哪个按钮为默认的，还 H )' 以通过 CancelCommandindex 属 
性来设 W 用户按下 Esc 键所触发的按钮。 


How To Async #1 


用户按 卜架个按钮 / Ti , 消息框消失， Completed 回调方法会被调用。这个回调的第一个 
参数传入的 1 j ShowAsync 返回的是同一个对象。只不过这里变置的名称发生了一些变化 
( asyncinfo ), 因为它" I 以为我们提供额外的信息。 



lAsyncOperation 接口有一个名为 Status 的厲性，诚性类胡为 AsyncStatus 的枚平。这个 
枚平的成员包枯 Started , Completed , Canceled 和 Error 。 这个属性的值通过第二个参数传 
入 Completed 处理程序。如果发生错误 （ ’般 1 j MessageDialog 炎无关，而巾文件 I / O 或 
Internet i 方问引起)， lAsyncOperation 的 ErrorCode 厲性会 被设筲 为一个 Exception 类别的 
对象。 

调用 GetResults 前应该检 A 状态 是古为 Completed 。 GetResults 方法会返回类甩取决于 
lAsyncOperation 的泛增参数。 对丁木 氺例，该方法会返回代表被按 F 按钮的 lUICommand 
对象。我们 " J ■以通过该对象的 Id 诚 性获得个标识对象，该对象是之前通过 UlCommand 
构造函数的第7个参数传入的。木氺例将其转换成 Color 值。 

现在， 程序或 iK 以通过这个 Color tf [来设界 Grid 的背景颜色。 

contentGrid.Background = new SolidColorBrush(clr); 


别急，还+行！ 

当 fV ! 序调 ) U ShowAsync 时， MessageDialog 会创达单独的1:作线程来砧示对话框和按 
钳。当用户按卜按钮 Fi , 我们指定的 Completed 处现程 序会被调用。处理程序的调用也发 
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生在这个[:作线程 h , 但这个线程不允许访问用户界面的对象！ 

小论哪个銜口，应用程序都只有一个线程来处理用户输 入和早 .现用亍交互的控件和图 
形，这个线程被称为 “ UI 线程”。对 Windo . ws 应用程序来说， UI 线程非 常重要 R 特殊， 
因为 U 用户的所冇交互都发生在此线程上，但只有运行在这个线程 h 的代码才能够访问构 
成用户界面的允素和控件， 

这个限制 " j + 以如此 描述： DependencyObject 不是线程安全 ( thread ' safe ) 的。 仟何继承丁- 
DependencyObject 的类所产< k 的对象只能巾创述该对象的线程访问。 

就木氺例而言， Color 值可以在工作线程上创建，因为 Color 是一个结构，并不是派生 
& DependencyObject 。 但使这个 Coloi •值作用于用户界面的代码必须运行在 UI 线程匕 

乍运的是，这是可以做到的。 DependencyObject 类不是线程安令的，为弥补这•缺憾， 
该类暴 露了一 个名为 Dispatcher 的属性，返回类艰为 CoreDispatcher 的对象。对; T 不能从其 
他线程访问 DependencyObject 这一规定，访问 Dispatcher Mtt .是个例外。我们可以通过 
CoreDispatcher 的 HasThreadAccess 属性来获悉当前 DependencyObject 是否 uj 以在当前线程 
I :访问。不管能或不能，耑要在创建该对象的线程 h 执行的代码都可以被放入一个队列中 
等待执行。 

通过 CoreDispatcher 定义的 RunAsync 方法，我们 uj _ 以将代码放入队列中来使其:在 UI 
线程 h 执行。这个方法也是一个异步方法， " I •以传入需耍在 UI 线程 h 运行的方法。 

void OnMessageDialogShowAsyncCompleted(IAsyncOperation<IUICommand> asynclnfo, 

AsyncStatus asyncStatus) 

I 

// Use a Dispatcher to run in the UI thread 

this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, OnDispatcherRunAsyncCa1lback); 



// Set the background brush 

con ten tGr id. Background new SolidColorBrush (clr); 

来自 Dispatcher 属性的 CoreDispatcher 对象通常不被保存在变最中。就木•例而 h , 
RunAsync 方法是直接在 Dispatcher 属性 I •.调用的。传入 RunAsync 方法的回调 " J * 以安全地 
访问用户界面。但需要注总的是，我们不能通过参数向这个方法传入任何信息， 
OnMessageDialogShowAsyncCompleted 须先将 Color 值保存到字段中。 

从哪个对象获得 CoreDispatcher 对象都尤所谓，因为所有用户界面对象都在同一个 
线程上创建，这些 U 1 对象的工作方式也是一致的。 

CoreDispatcher 的 RunAsync 方法会返回 lAsyncAction 类型的对象(前一段代码并没有 
展示>。 

lAsyncAction asyncAction = this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, 

OnDispatcherRunAsyncCallback); 

lAsyncAction 非常类似 p MessageDialog 的 ShowAsync 方法返回的 IAsyncOperation 对 
象。两#均实现了 lAsynclnfo 接口。 JS 大的区别在丁 • IAsyncOperation 针对的是有返回值的 
异步方法(因而耑 耍提 供泛®参数)，而 lAsyncAction 针对的是无返回值的异步方法。 

>' 曲'是相关接口的 M 次结构$ 
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lAsyncInfo 

IAsyncAction 

IAsyncActionWithProgress < TProgress > 

IAsyncOperation < TResult > 

IAsyncOperationWithProgress < TResult , TProgress > 

其中有两个接口定义了在执行异步任务时报告进度的 方法。 

对于 CoreDispatcher 对象的 RunAsync 方法返回的 IAsyncAction 对象，我们可以将其 
Completed 属性设置为某个处理程序来访问用户界面。 

void OnMessageDialogShowAsyncCompleted(IAsyncOperation<IUICommand> asynclnfo, 

AsyncStatus asyncStatus) 

« 

IAsyncAction asyncAction = this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, 

OnDispatcherRunAsyncCallback); 

asyncAction.Completed = OnDispatcherRunAsyncCompleted; 

) 

void OnDispatcherRunAsyncCompleted(IAsyncAction asynclnfo, AsyncStatus asyncStatus) 

{ 

contentGrid.Background - new SolidColorBrush(clr); 


这个 Completed 处理程序运行在 UI 线程。 OnDispatcherRunAsyncCallback 的存 / l : 无实 
际意义，指定这个方法是因为 RunAsync 的第.个 参数+ 能为 null 。 

下面是 HowToAsyncl 项目 XAML 文件的主要内容。这段 XAML 定义了一个专门用丁 • 
调用 MessageDialog 的按钮。 

项冃 ： HowToAsyncl | 文件： MainPage.xaml { 片段） 

<Grid Name="contentGrid" 

Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Button Content="Show me a MessageDialog!" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Click- M OnButtonClick M /> 


</Grid> 

代码隐藏类到 u 前为±还没有什么特别之处。 

项 R: HowToAsyncl I 义件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
l 

Color clr; 

public MainPage() 

( 

this.InitializeComponent(); 


void OnButtonClick(object sender, RoutedEventArgs args) 

( 

MessageDialog msgdlg = new MessageDialog("Choose a color", "How To Async #1"); 
msgdlg.Commands.Add(new UICommand("Red", null. Colors.Red)); 
msgdlg.Commands.Add(new UICommand("Green", null. Colors.Green)); 
msgdlg.Commands.Add(new UICommancM"Blue", null, Colors.Blue)); 
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这个回调在 UI 线程执行。闵此，它或 i 午是一种获取按钮命令的简便方法。 


7.3 Lambda 函数形式的回调 

为了更好地实现回调方法， C # 3.0 引入了 “匿名方法” (anonymous method ), 也被称为 
Lambda 函数或 Lambda 表达式。4例项 U HowToAsyncl 中的所冇回 i 周逻辑均能够移入 Click 
处理程序，以 Lambda 函数的形式实现，并 li Coloi •值需要通过7•段传递。这 IF . 如/』;•例 
项0 HowToAsync 2 所展示的。 

项 H: HowToAsync2 I 义件： MainPage.xaml.cs ( 片 段） 
void OnButtonClick(object sender, BoutedEventArgs args) 

( 

MessageDialog msgdlg = new MessageDialog("Choose a color", "How To Async #2"); 
msgdlg.Commands.Add(new UICommand("Red", null. Colors.Red)); 
msgdlg.Commands.Add(new UlCommand("Green", null. Colors.Green)); 
msgdlg.Commands.Add(new UlCommand("Blue", null. Colors.Blue)); 

// Show the MessageDialog with a Completed handler 
IAsyncOperation<IUICommand> asyncOp = msgdlg.ShowAsync(); 
asyncOp.Completed = (asynclnfo, asyncStatus)=> 

// Get the Color value 

IUICommand command = asyncInfo.GetResults(); 

Color clr = (Color)command.Id; 

// Use a Dispatcher to run in the UI thread 

IAsyncAction asyncAction = this.Dispatcher.RunAsync(CoreDispatcherPriority. 


// Set the background brush 

contentGrid.Background = new SolidColorBrush(clr); 


虽然所有逻辑均被移入 Click 处理程序，但 M 然这段代码并非一次全部执行。 
MessageDialog 的 Completed 处理程序仅在消息框消失 / Ti 执行，而 CoreDispatcher 的回调仅 
在 UI 线程空闲时执行。 

嵌葚两个 Lambda 函数或许还说得过去，但复杂的嵌套不免让人感到困惑。例如，文 
件 I / O 往往涉及一系列的操作，其中的一些吋能是异步的.而选择使用嵌套的 Lambda 函数 
会导致代码结构混乱+堪。虽然 Lambda 函数用起来方便，但往往也会削弱程序的吋读性。 
某钱情况下，为了完成简中-的 return 语句或异常处理，使用 Lambda 函数吋能会遇到麻烦。 
我们需要其他解决方案。幸运的是，的确有一种。 

7.4 神奇的 await 运算符 

与回调形式不同， C # 5.0 的 await 关键字吋以像普通方法一样来执行异步操作。这是之 
前用7•获取 IAsyncOperation 对象的代码。 

IAsyncOperation<IUICommand> asyncOp = msgdlg.ShowAsync(); 

上一个水例通过回调方法来获得代表被按 T 按钮的 lUICommand 对象。 await 运算符町 
以自:接从 IAsyncOperation 对象提取 RJlCommand 对象。 

lUICommand corranand = await asyncOp; 

通常以 _ h 两语句是合.为一的， il : 如示例项 U HowT 0 A SynC 3 程序所展示的。此程序与 
之前两个是等效的。 

项 H: HowToAsync3 I 文件： MainPage.xanil.cs 段） 
async void OnButtonClick(object sender, RoutedEventArgs args) 

{ 

MessageDialog msgdlg = new MessageDialog("Choose a color", "How To Async #3"); 
msgdlg.Commands.Add(new UICommand("Red", null. Colors.Red)); 
msgdlg.Commands.Add(new UICommand("Green H , null. Colors.Green)); 
msgdlg.Commands.Add(new UlCorwnand("Blue", null. Colors.Blue)); 

// Show the MessageDialog 

lUICommand command = await msgdlg.ShowAsync(); 



contentGrid.Background = new SolidColorBrush(clr); 

J 

代码很漂亮，不是吗？ 

await 关键字是 C # 运算符，嵌在复杂代码中也是合乎语法的。例如，叶以将 I •.段代码 
的后三条 ® 句合并为一条。 


contentGrid.Background 二 new SolidColorBrush((Color)(await msgdlg.ShowAsyncO).Id); 

这 >11 要特别强调一 下： HowToAsync 3 在功能 I : 与前两个程序完全等同。但 




HowToAsync3 的语法更为简洁，这都要归功 ！"• await 运算符。 await 运算符似乎消除了所有 
凌乱的回调，并直接返回 HJlCommand。 这就像魔术一•样，但幕后的实现则被隐 藏了。 C# 
编译器能够识别 ShowAsync 方法的模式，并生成回调和对 GetResults 的调用。 

从本质上讲， await 运算符会对它要调用的方法进行分解，将其变成 一个状 态机。 
OnButtonClick 方法最初会按常规方式执行，宣到通过 await 调用 ShowAsync =尽管关键字 
await 字面上有等待之意，但它实际并不会等待操作执行完毕。相反， OnButtonClick 方法 
会在此时暂停。控制权会被交还给 Windowsc 程序用户界 liti 的其他代码得以执行，包括 
MessageDialog 本身 。当 MessageDialog 被关闭，结果返回， UI 线程空闲， lUICommand 
对象被返回， OnButtonClick 方法才会继续执行。若再次遇到 await 运算符，依此类推。 

在 await 出现之前，本人认为在 C# 中执行计-步操作会破坏语肖的命令式结构 (imperative 
structure), await 运算符使命令式结构得以回归.使异步调用看 h 去是普 M 方法的顺序调 
用。但在 await 带来了便利的同时，也应时刻牢记 一点： 出现 await 的方法在幕后会被拆成 
多段回调代码。 

某些情况卜，这种拆分也会造成一些 H 题。在 Windows 调用程序中的方法时，荇方法 
将控制权交还给操作系统， Windows 便会认为它执行完毕。如果方法中使用了 await 运算 
符，情况则不同了。对： T 含有 await 的方法， await 运算符后面的代码执行之前，控制权会 
被交还给 Windows。 

为使 Windows 知悉使用 await 运算符的方法尚米执行完毕，耑耍用到一个“延 
期” （ deferral) 对象。在本章介绍 Application 类的 Suspending 事件时会具体讲解这个工作 
机制。 

await 运算符也有一些限制。例如，它不 能出 现在异常处理程序的 catch 或 finally 子句 
中，但它叮以出现在 try 子句中。我们 uj ■以在 try 子句中捕获异步方法抛出的异常，或决定 
异步操作是否被取消(稍后会介 绍)。 

包含 await 运算符的方法必须被标记为 async, [K 如这个 Click 处理程序所展水的。 

async void OnButtonClick(object sender, RoutedEventArgs acgs) 


这个 async 关键？■•没有太多作用。由 P C# 的吊期版本未将 await 当作关键宁，程序员 
叶以将其作为变®名、 M 性名或其他名称。 C# 5.0 引入的 await 关键字会破坏这种代码，但 
将 await 限制在 async 关键7-修饰的方法中则可避免这个问题。 async 修饰符并+影 响方法 
的签名，上述方法仍是有效的 Click 处理程序。但我们+能对入口方法使用 async(Wlfi] '也+ 
能使用 await ), 具体来说就是 Main 函数和类的构造函数。 

如果需耍在贞血初始化过程屮调用异步方法，就耍将这些方法调用胥 T Loaded If 件处 
理程序中，并将这个处理程序标记为 async。 

public MainPage O 



async void OnLoaded(object sender* RoutedEventArgs arg) 
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如果希望以匿名方法的形式来定义 Loaded 处理程序，则可以像 F 面这样做。 

public MainPage() 

{ 

this.InitializeComponent(); 

Loaded += async (sender, args)=> 

{ 

)； 

) 

注意到参数列表前的 async 关键字了吗？ 


7.5 异步操作的撤销 


并非所有异步操作都以像调用 MessageDialog 的 ShowAsync 方法一样简单明/。异 
步操作有二个特性会使其变复杂。 

• 撤销 由于用户可能有意终 It 或由丁•其他原闪，许多异步操作需要实现撤消。 

• 进度 有鸣异步操作能够报告耗时操作的进展情况。用户往往希 望通过 
ProgressBar 或文本形式肴到进度报告。 

. 错误 异步操作执行期间吋能会出现错误(例如，尝试打开不存在的文件)。 

卜面先来说说撤销的 M 题。撤销消息框(即在用户按卜按钮之前使其从屏幕消失)非常 
普遍，但或许在特定场景下讨论更有意义。 

lAsyncInfo 接口 (Windows Runtime 中4个标准异步接口所继承的接口)定义了一个名为 
Cancel 的方法，用 P 撤销操作。 iK 如前文所介绍的， lAsynclnfo 接口还定义了一个名为 Status 
的屈件，类型为 AsyncStatus 枚平。这个枚平有4个成员： Started » Completed . Canceled 
和 Error 。 该接口的另一个属性为 Exception 类型的 ErrorCode 属性。 

如果以回凋形式执行异步操作，耑要在冋调方法的起始处检迕 Status 属性，确保在调 
用 GetResults 方法前该属性的位为 Completed . 而非 Canceled 或 Error 。 

await 应在 try 块中使用。如果异步操作中途被撤销，它会抛出 TaskCanceledException 
类喂的异常。若异步操作执行期间发生真正的错误，所抛出的异常则包含错误信息。 

¥例项11 HowToAsync 3 是这样调 ffl MessageDialog 的 ShowAsync 方法的。 

IUICoiranand command = await msgdlg.ShowAsync(); 

为探究猫 G 的 lAsyncOperation 对象，吋以将这条语句拆成两条。 

IAsyncOperation<IUICommand> asyncOp = msgdlg.ShowAsync(); 

IUICommand command = await asyncOp; 

两种写法效果 上并无 差別。这总味着我们吋以将 asyncOp 对象以字段形式保存，这样 
类内部的其他方法 便吋以 调用该对象的 Cancel 方法。 

卜'面让我们通过 II •时器来触发 MessageDialog 的撤销。示例项14 HowToCancelAsync 
会作 MessageDialog 动一个5秒的 DispatcherTimer 。 如果 MessageDialog A ： 5秒内 
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未被用户主动撤销，计时器的 Tick 車件处理程序会调用保存在字段中的 IAsyncOperation 
对象的 Cancel 方法。 

项 R: HowToCancelAsync | 文件： MainPage.xaml.cs ( 片段） 
public sealed partial class MainPage : Page 
( 

IAsyncOperation<IUICommand> asyncOp; 

public MainPageO 

{ 

this.InitializeComponent 0; 


async void OnButtonClick(object sender, RoutedEventArgs args) 

[ 

MessageDialog msgdlg - new MessageDialog("Choose a color", "How To Cancel Async"); 
msgdlg.Commands.Add(new UlCommand("Red", null. Colors.Red)); 
msgdlg.Commands.Add(new UlCommand("Green", null. Colors.Green)); 
msgdlg.Commands. Add (new UICoirenandCBlue", null. Colors .Blue)); 


// Start a five-second timer 

DispatcherTimer timer - new DispatcherTimer(); 
timer.Interval = TimeSpan.FromSeconds(5); 
timer.Tick +- OnTimerTick; 
timer.Start (); 


// Show the MessageDialog 
asyncOp = msgdlg.ShowAsync(); 
IUICommand command = null; 



command = await asyncOp; 

) 

catch (Exception) 

( 

// The exception in this case will be TaskCanceledException 


// Stop the timer 
timer.Stop(); 

// If the operation was cancelled, exit the method 
if (command ■- null) 
return; 


// Get the Color value and set the background brush 
Color clr = (Color)command.Id; 

contentGrid.Background = new SolidColorBrush(clr); 


void OnTimerTick(object sender, object args) 

( 

// Cancel the asynchronous operation 
asyncOp.Cancel(); 


这个可撤销版木的逻辑显然要史复杂些，但这段代码并小比平时使用 try - catch 块的代 
码复杂，并且仍保持命令式结构。 这甩 耍冉次提醒一 K : await 运算符之前的代码会先执行。 
MessageDialog 消失后， try 块中的代码会继续执行。+论是否存在异常，程序都会检杏 try 
块中赋值的 command 变鼠 是否为 null 。 
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7.6 File I / O 的处理 

熟悉 . NET 的开发者应该对实现文件 I / O 的 System . IO 命名空间不陌牛.。其中的一些经 
验在 Windows 8中仍然适用，但 Windows 8的 System . IO 命名空间更楮简。以 
Windows . Storage 为前缀的几个命名空间包舍 Windows Runtime 对文件1/0的大部分 夂持。 
这必然涌现许多新的文件1/0类和概念。文件~流的粮發接口得到改进，访问磁盘的所有 
方法也均被改为异步形式。 

Windows 8应用程序冇三种进行文件 I / O 的方法。下 III 】 7节将逐一介绍。 

应用程序本地存储 

如果应用程序 ST 要保存对其他应 ffl 程序或用户无关的信息，设好将其存储在应用程序 
的本地存储中。本地存储有时也称为 “独立 存储”，是应用程序在硬盘 h 的专属区域，但 
应用程序不需要关心它的实际位置。如果应用程序从系统中被移除，这片区域也会被自动 
释放。 

i 方问 独立存储需要用到 Windows . Storage 命名空间的 ApplicationData 类。应用程序当 
前用的 Windows . Storage 对象通过 Current 屈性获得。 

ApplicationData appData = ApplicationData.Current; 

为方便使用， ApplicationData 类定义了几个属性。 

LocalSettings 和 RoamingSettings 属性允许我们访问 ApplicationDataContainer 对象。 
ApplicationDalaContainer 对象以字典形式存储应用程序设置。这些应用程序设胃.仪限 P 
Windows Runtime 的基本数据类型(数值与字符串)。 

LocalFolder、RoamingFolder 和 TemporaryFolder 厲性能够返回 StorageFolder 类切的对 
象。 StorageFolder 类是 Windows . Storage 命名空间的重要组成部分。 StorageFolder 类代表 U 
录，对本地存储来说它代表应用程序 V 属的 tl 录。 StorageFolder 类包含用子创建子 tl 录及 
创建和访问文件的方法。文件由 StorageFile 对象表示，吋以打幵，并返回吋供读/写的流。 


文件选择器 


FileOpenPicker、FileSavePicker 和 FolderPicker 是 Windows . Storage.Pickers 命名空间中 
三个较为軍要的类，代表供 Windows 8应用程序使用的三种标准对话框，可以用來打开和 
保存标准数据文件夹中的文件(标准数据文件夹包括“文档库”、“音乐库”和“图片 
库”。 

'J MessageDialog 类似 ， FileOpenPicker 和 FileSavePicker 具有用 : Pffi 尔对话框的异 
步方法，能够返回 StorageFile 类喂的对象，而 FolderPicker 能够返回 StorageFolder 类喂的 
对象。 

用户能 够通过 这些选样器浏览文件系统，并授权应用程序对其进行访问，因而这些选 



择器非常灵活。应用程序通常只接受特定类型的文件。以 FileOpenPicker 为例，在使用这 
个选押器时，应通过 FileTypeFilter 厲性至少为其指定一种文件类型(如 “. txt ” ）。文件类型 
描述不能包含通配符。 

虽然 FileOpenPicker 能够显示各种类型的文件.但它只会显示应用程序通过 
FileTypeFilter 属性指定的文件类型，而无法显示所有类型的 文件。 

批量访问 

应用程序可以通过 Windows . Storage . BulkAccess 命名空间中定义的 Filelnformation 和 
Folderlnformation 类来直接访问文件系统。这两个类允许应用程序以非常灵活的方式査询和 
操纵文件夹中的子文件夹和文件。 

这种文件访 M 方式不受用户干预，因而应用程序需要事先声明这个需求。使用批量访 
问的应用程序耑耍通过 package . appxmanifest 卢明应用程序所要 t 方问的存储区域。在 Visual 
Studio 中，我们讨以通过对话框编辑 package . appxmanifcst 文件。为访问相应的存储区，羔 
要在对话框的“功能”选项卡中选中对应的“文档库”、“音乐库”和“视频库”。该选 
项卡列出的功能选 项用于 定义应用程序的权限。若选择“文档库”，则必须在“声明”选 
项卡中添加“文件类型关联”，应用程序所针对的所有文件类型必须 M 式地卢明。用户所 
能#到的文件也仅限于所声明的这些文件类型。 

第14章介绍 PhotoScatter 程序时会演示如何 M 过这些类来访问“图片库”。木章会将 
電点放在另外两种文件 I / O 方式 

7.7 文件选择器和文件 I/O 

为进一 步认识 FileOpenPicker 和 FileSavePicker 类，我们来编写一个炎似丁- 
Windows “记事本”的小程序 PrimitivePad 。 这个程序带有几个命令按钮和一个较大的 
TextBox 。 命令按钮一般是通过应用栏 (application bar ) 实现的，但本 [5 将应用栏的相关话题 
留到第8章进行讨论。 

PrimitivePad 有两个用丁•文件 I / O 的 按钮： Open 和 Save As 。 在实际的应用程序中，吋 
能还冇 New 和 Save 按钮，并在用户按卜 New 或 Open 后提示是保存还是放弃当前文件的 
更改。下一章会具体描述这个逻辑。 

PrimitivePad 还有一个 用丁更 改换行模式的按钮，该模式的状态会以程序设 S 的形式保 
存。此程序的 XAML 文件如 卜所 示。 

项 R: PrimitivePad I 义件： MainPage.xaml ( 片段 } 




<RowDefinition Height="Auto" /> 
<RowDefinition Height*"*" /> 
</Grid.RowDefinitions> 

<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width*"*" /> 

<ColunmDefinition Width:"*" /> 
<ColumnDefinition Width="*" /> 

</Grid.ColumnDefinitions> 

<Button Content:"Open.. 

Grid.Row«="0" 

Grid.Column="0" 

Style="{StaticResource buttonstyle}" 
Click= n OnFileOpenButtonClick M /> 



Style-"IStaticResource buttonStyle}" 
Click="OnFileSaveAsButtonClick" /> 

<ToggleButton Name="wrapButton" 

Content=”No Wrap" 

Grid.Row="0" 

Grid.Column="2" 

Style-"{StaticResource buttonStyle)" 
Checked:"OnWrapButtonChecked" 
Unchecked«"OnWrapButtonChecked" /> 

<TextBox Name="txtbox" 


Grid.Row="l M 



Grid.ColunmSpan="3" 

FontSize="24" 

AcceptsReturn= M True" /> 

</Grid> 

</Page> 

如 F 图所示，这三个按钮分列于屏幕顶端，我们可以在大的这个 TextBox 中写一首诗。 



FileOpenPicker 和 FileSavePicker 类调用的对话框会完全遮住应用程序原木的界而，并 
在对话框被关闭后控制权才会被交给应用程序。如果这个行为不满足需求，则要采用批慑 
访 M 的方式 U 行查询文件 LI 录。 

这两个类都能够返回 StorageFile 类哦的对象给应用程序。 （ FileOpenPicker 支持多选， 





因而 一次吋 以返回多个 StorageFile 对象。 )StorageFile 类位丁- Windows.Storage 命名空间中. 
表示未打开的文件。 StorageFile 对象的 Open 方法能够返回流对象。这个流对象实现了 
Windows . Storage.Streams 命名空间下定义的 IlnputStream sK IRandomAccessStream 接口。我 
们■以将 DataReader 和 DataWriter 对象附加到这个流对象 I •-来分别进行读操作和写操作。 
System.IO 命名空间中定义的扩展方法叫 以将 Windows Runtime 流对象转换为我们熟悉 
的 .NET 对象(如 Stream Reader 和 StrearnWriter ) 来对文件进行读和写。这样我们便以屯用 
權 r .NET 流的现有代码，也吋以通过 .NET 流对象对 XML 文件进行读和写。 

FileTypeFilter 属性中指定一个合法的字符串(如 “. txt ”） 是使用 FileOpenPicker 唯 
的前提条件。设 K 该属性后，调用 PickSingleFileAsync 方法便可以打幵标准的文件选择器。 
用户可以从中选押现有的文件，然后“打开”，或荇直接“取消”。如果使用 await 来调 
用该方法，枰序会直接返回代表用户选择的文件的 StorageHile 对象。 卜'面 的代码 展氺了 
Open 按钮的 Click If 件处理程序。 

项 R: PrimitivePad | 文件： MainPage.xaml.cs ( 片段 } 

async void OnFileOpenButtonClick(object sender, RoutedEventArgs args) 

( 

FileOpenPicker picker = new FileOpenPicker(); 
picker.FileTypeFilter.Add(".txt M ); 

StorageFile StorageFile = await picker.PickSingleFileAsync(); 



using (IRandomAccessStream stream = await StorageFile.OpenReadAsync()> 

using (DataReader dataReader » new DataReader(stream)) 
i 

uint length = (uint)stream.Size; 
await dataReader.LoadAsync(length); 
txtbox.Text *= dataReader.ReadString(length); 


PickSingleFileAsync 方法实际返同的是 lAsyncOperationKStorageFiles ^' j " 象。该方法是少 
数儿个泛型参数所代表的对象町能为 null 的方法。当用户按下文件打开选样器的“取消” 
按钮后，则会返回 null 值。此时便无需执行后续的操作了。 

为打开 StorageFile 对象以便读取文件内容，可以调用该对象的 OpenReadAsync 方法。 
由 r OpenReadAsync 方法要访问磁盘，因而该方法也是一个异步的。这个方法实际会返回 
IAsyncOperation<l Random AccessStreamWithContentType > 类 型 的 对 象。 

IRandomAccessStreamWithContentType 接口实现了 IRandomAccessStream 接口，因而这段 
代码使用的是这个较短的接口名称。巾 f IRandomAccessStream 实现了 I Disposable 接口， 
因而最好将 IRandomAccessStream 对象 WP using 块中，以便使其动被释放。 

DataReader 类也实现了 〖Disposable 接口。这个类为 Windows Runtime 坫木炎咿提供了 
若「_ “读”方法(如 ReadString )。 这些“读”方法是同步方法，因为它们小涉及磁盘访问， 
而只是从 存储丁 •内存的内部缓存 (IBuffer 类甩)读取数据并将其转换为具体的数据类甩。实 
际访 l’"j 磁盘文件的方法为 LoadAsync 方法。在这些“读”方法被调用前， LoadAsync 方法 
会将一定鍛的字节从文件加载到缓存。大文件最好分段加战。 DataReader 的 



UnconsumedBufTerLength 属性正用于支持这种加载方 式。 

如果不使用 await 运算符，则需要为这三个异步方法分别指定回调方法。为在 UI 线程 
中设置 TextBox 的 Text 属性，还需要定义一个回调方法。 

文件保存的逻辑9读取类似(如下所示> 



using (DataWriter dataWriter = new DataWriter(stream)) 




DataWriter 的 StoreAsync 方法会返回实现 lAsyncOperation<uint：> 接口的对象。 uint 值表 
示写入文件的字节数。 StoreAsync 是这段程序调用的最 0 的方法。有人或许会问，为何这 
个方法还要使用 await 运算符。一般来说，在不关心返回值时，调用异步方法可以不使用 
await 。 但应牢记于心 的是： 在异步方法运行过程中主调方法会继续执行。如果主调方法在 
继续执行后隐式地期待异步方法完成，则会出现问题。就木示例而言，之所以没有省略 
await. 是因为 using 块会隐式地关闭 DataWriter 和 IRandomAccessStream 对象，而这+应 
发生在 StoreAsync 执行完毕之前。 

示例程序 PrimitivePad 中还有一个 ToggleButton 控件，允许用户选择文本是否 换行。 
这正是 MainPage 代码隐藏文件 M 后一部分代码所实现的。 

项 R: PrimitivePad | 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
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i.IsChecked 

Textwrapping 』 

wrapButton.Content = (bool)wrapButton.IsChecked ? "I 
appData•Values["Textwrapping" 】 =(int)txtbox.Textwrapping; 


这个程序有一个引用 ApplicationDataContainer 对象的宁-段。该对象的 Values 属性是一 
个字典，应用程序吋以通过它来保存基本数据类型的设霄。在 Loaded 事件处理程序中，如 
果这个字典包含 Textwrapping 设置，则根据它來初始化 TextBox 的属性， ToggleButton 也 
会被相应地初始化。 

若 ToggleButton 的状态发牛.变化，处理程序会设置 TextBox 的 TextWrapping 属性，并 
将新设置保存在字典中。 

这是保#应用程序设 S 的途径 之一。 木章稍后还会介绍一种通过 Application 类的 
Suspending 属性保存应用程序设置的方法。如果希®探浮这些设 H (和其他本地存储)在硬盘 
.匕的位置，可以先通过 Visual Studio 打开 Package . 叩 pxmanifest 文件，在“打包”选项卡中 
作看应用程序的“包名称”。（也吋以以 XML 格式杳看该文件 Identity 元桌的 Name 特性。） 
这个名称是能够标识应用程序的 GUID 。 程序设 S 和本地数据 nj 以在以 卜 W 录中找到。 

C:\Users\[user-nameJ\AppData\Local\Packages\[app-guid] 


7.8 异常处理 

我们可以有意使 PrimitivePad 程序崩溃。例如，按 F PrimitivePad 程序的 Open 按钮, 
在选择器中选中某个文件，通过 Windows 资源管理器(或其他程序)删除该文件，然后按选 
择器的“打开”按钮。 PrimitivePad 在尝试打开不存在的文件时会引发异常。 

为了捕获这个错误，吋以将检杳变最 storageFile 是否为 null 之后的代码放在 try 块中。 
但应注意，+能在 catch 块中通过 MessageDialog 来提氺用户有错误出现， 闪为 catch 块中 
不允许出现 await 运算符。卜'面给出一种较为合理的异常处理方法。 

async void OnFileOpenButtonClick(object sender, RoutedEventArgs args) 


Exception exception = null; 

try 

{ 

using (IRandomAccessStream stream = await storageFile.OpenReadAsync()) 
( 

using (DataReader dataReader - new DataReader(stream)) 

( 

uint length * (uint)stream.Size; 

await dataReader.LoadAsync(length); 

txtbox.Text = dataReader.ReadString(length); 
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MessageDialog msgdlg = new MessageDialog(exception.Message, 



await msgdlg.ShowAsync(); 


ili 后面的 if 语句通过检杏 exception 变暈是否为 null 值来判断是否存在异常。如果存在 
异常， MessageDialog 就会 M 示错误 消息。 


7.9 多个异步调用的合并 

我们 NJ ■以将所有的文件打开和保存逻辑提取成独0：的方法，然后在按钮的 Click 事件 
处理程序中调用这些方法。这样，如果程序需要在多处使用选择器来打开或保存文件.便 
可以复用这些方法了。 

为了达到这个 U 的，以通过一个名为 LoadFile 的方法 来显示 HleOpenPicker , 读取文 
本文件的内容，然后返回一个字符串。这柞一来 OnFileOpenButtonClick 方法便可以得到简 
化。 


void OnFileOpenButtonClick(object sender, RoutedEventArgs args) 

{ 

txtbox.Text = LoadFile (); 

) 

但事实上，我们不能这样简化该方法。 LoadFile 方法不能返回 string , 因为在所有异步 
操作完成之前是得+到 string 的。这里冉次提醒读者， await 运算符会使编译器牛成回调方 
法，就好像我们有 意为之 一样。可以尝试编写一个 LoadHle 方法来显式地调用回调方法， 
并从这个 LoadFile 方法返回 string , 但 S 终会发现这是做不到的。 

我们耑要在调用 LoadFile 时使用 await 运算符，将该方法重命名为 LoadFileAsync 。 



这样我们便 " f 以不在 LoadFileAsync 中进行异常处理，而在主调程序中进行(例如 
OnFileOpenButtonClick 处理程序)。 

但真 iF . 的问题在 P : LoadFileAsync 到底应该返回什 么类切 ？根据 Windows Runtime 中 
实现的:步方法猜测，它或许应该返回 IAsyncOperation < string > 类型。但实际 t ： 是做+到的。 
关键问题 / l ; P Windows Runtime 未提供实现该接口的公共类。 

C # 程序员习惯使用 . NET 中的类来实现异步操作。也就是说， LoadFileAsync 方法的最 
伴返回类型为 Task < s tring >。 因而该方法可以像下面这样定义。 



FileOpenPicker picker = new FileOpenPicker(); 
picker.FileTypeFilter.Add(•• • txt"); 

StorageFile storageFile = await picker.PickSingleFileAsync{); 



if (storageFile = null) 




using (DataReader dataReader = new DataReader(stream)) 



await dataReader.LoadAsync(length); 
return dataReader.ReadString(length); 


IE 然这个方法被命名为 LoadFileAsync , 但其中的代码都运行在 UI 线程上。由于该方 
法幕后有一部分仍运行 T 另外的线程上，因而该方法仍被认为是异步方法。应注意的是， 
如果用户按 卜文 件选择器的“取消”按钮，该方法会返回 null 。 TextBox 的 Text 属性+能 
设宵为 null , 因而 Click 处理程序必须对这种情况进行处理。 

async void OnFileOpenButtonClick(object sender, RoutedEventArgs args) 

( 

string text ■ await LoadFileAsync(); 

if (text != null) 

txtbox.Text - text; 

> 

那么 Task 是什么呢？ Task 是定义 T System . Threading . Tasks 命名空间下的类，是 .NET 
实现异步和并行处理的核心。它有泛型和非泛型的版木。对于无返回值的异步方法， 以 
使用非泛型的版木。下血这个包含所有保存逻辑的方法展示了 Task 非泛型版本的使用。 



FileSavePicker picker = new FileSavePicker(); 
picker.DefaultFileExtension - ".txt"; 

picker.FileTypeChoices.Add("Text", new List<string> { ".txt" }); 
StorageFile storageFile = await picker.PickSaveFileAsync(); 



if (storageFile = null) 


using (IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.ReadWrite)) 



. NET 和 Windows Runtime 对异步处理的支持是一致的，两者相关的类型也是吋以相4: 
转换的。 Task 有一个名为 AsAsyncAction 的扩展方法，能够返回 I Async Action ； Task < T > 
有•个名为 AsAsyncOperation < T > 的扩展方法，能够返回 lAsyncOperation < T >。 相应地， 

I Async Action 有一个名为 AsTask 的方法，能够返回 Task ； lAsyncOperation < T > 有•个名为 
AsTask < T > 的方法，能够返回 Task < T >。 



然而，相比 Windows Runtime 中的 Task 对异步的支持， . NET 中的 Task 史为强大，能 
够管理并行处理，还能够等待一组任务。用一本书来介绍 Task 也不为过，但这不是木书的 
重点。木章的電点是如何通过 Task 来处现耗时的任务。 

7.10 高效的文件 I/O 

虽然程序员应该熟练使用 DataReader 和 DataWriter 来进行文件 I / O , 但大部分文件 I/O 
操作都叫以通过一些更简便的方法來完成。 Windows . Storage 命名空间的 HlelO 和 PathlO 
类提供了一些方法。有了这些方法，单次调用便可以实现对文件的读和写。 

对文本文件来说， FilelO . ReadLinesAsync 方法可以读取文件内容并返回 string 对象的 
lList (1 si 个 string 对应文木中的一行)，而 FilelO . ReadTextAsync 能够通过单个 string 对象返 
回整个文件内容。就¥例项0 PrimitivePad 而存， OnFileOpenButtonClick 中的两个嵌套的 
using 语句吋以替换为 K 面这行代码。 

txtbox.Text = await FilelO.ReadTextAsync(storageFile); 

类似地，该项目的文件保#逻辑岈以替换为下而这行代码。 

await FilelO.WriteTextAsync(storageFile, txtbox.Text, UnicodeEncoding.Utf8); 

对丁' :进制文件，我们可以使用 ReadBufferAsync 和 WriteBufferAsync 方法。这两个 
方法利用了旧 uffer 类型的对象。 IBuffei ■对象不过是系统内存中的字节序列。所有 I Buffer 
的引用都会被跟踪，这样 Windows 便迮不需耍它们的时候将其从内存中移除。 

IBuffer 对象在 C # 程序中无法寅接访问，但可以间接获得。为创建二进制文件，可以创 
建 DataWriter 对象，向其中写入内容，然后保存 DataWriter 创建的 lBuffer 对象。 



力读取.进制文件，可以先通过读取文件的方法来获得 lBuffer 对象，然后通过该对象 
来创建 DataReader , 

IBuffer buffer = await FilelO.ReadBufferAsync(storageFile); 

DataReader dataReader = DataReader.FromBuffer(buffer); 

// ... read from dataReader 

如果引入 System . Runtime . InteropServices.WindowsRunlime 命名空间，则 — nJ " 以将 lBuffer 
对象转换为 . NET 的 Stream 对象，然后通过 Stream 对象来创建 System . lO 命名空间定义的 
其他对象：其中包括 Binary Reader , Binary Writer、Stream Reader 和 S tream Writer » 我们还 
可以将 IButler 转换为字节数组。 

PathlO 炎 1 j FilelO 相似，但前者的静态方法接受的不是 StorageFile 对象，而是 URI 
字符串。为访问应用程序本身的内容文件，其 URI —般要以 “ ms - appx :///” 开头： 为访问 
应用程序存储中的文件，其 URI 要以 “ ms - appdata :///” 开头(稍后会进行演 不)。 

HttpClient 类用于通过 M 络 I :传和 K 载文件。如果+耑耍特别的灵活性，可以考虑使用 
简中-易用的 RandomAccessStreamReference 类。 
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Uri uri = new Uri("http://..; 

RandomAccessStreamReference streamRef = RandomAccessStreamReference.CreateFromUri(uri); 


using (iRandomAccessStream stream = await screamRef.OpenReadAsync()) 


调用 IRandomAccessStream 对象的 ReadAsync 以将文件内容读取到 I Buffer » 然将 
1 Buffer 传辛: DataReader.FromBufFer 静态方法。 

7.11 应用程序的生命周期 

PrimitivePad 程序存在一个不易被察觉的问题，尚待解决。我们都知道，如果运行常规 
的 Windows 桌时“记事本”程序，键入一些文本后尝试关闭该程序 (坷 以按右1:角的“关 
闭”按钮，按组合键 Alt + F 4 .从“文件”菜中.中选择“退出”，或者关闭 Windows ), 会 
有一个消息框 M 示“是否将更改保存到……？ ”吋以选择“保存”、“不保存”或‘‘取消”。 

我们对这个过程应该不陌牛 .， 但这对丁- Windows 8应用程序来说不是一个好的解决方 
案。如今，人们未必会坐在办公桌前，打开计算机，做一些工作，然后将汁算机关闭。人 
们更倾向于从提包中拿出平板电脑.放在咖啡桌匕解锁屏幕，用一会，然〗 n 将其放回包 
中。用户吋 能按 卜 _ 开关按钮将平板电脑 s r 休眠模式，或使其自动进入休眠模式。 

人们是否愿意在计算机休眠前被 Windows 应用程序洵问是否保存数据？ M 然答案是否 
定的。将计算机置丁•休眠(或将视线从屏辂 I •.移 开) 说明用户暂时不想 1 V 汁算机进行交互。 

但问题在 r , 如果放在咖啡桌 I :的平板电脑电®过低，甚伞:连休眠状态也尤以为继， 
并即将关机，这时该怎么办？实践当中无法提示用户。 

在我们所使用的计算机上， Windows 也有吋能需耍腾出一些内存。一种方式是终 ih 久 
置不用的应用程序。同样，用户不会希 M 被通知这一切的发生。 

出 T h 述原因的考虑，优秀的 Windows 8应用程序会保存信息，+论被终 Ih 4否都能 
提供连贯流畅的用户体验。如果应用程序包含由 丁- 丢失而会让用户感到懊悔的数据.那么 
在程序被终止并再次运行;这些数据应能够歌新呈现。（当然，不同应用程序的数据，歌 
要件也不冋。例如，如果汁算器程序丢弃一些数据吋能并无大碍，但电子表格丢失数据则 
让人无法接 受。） 

这应该小难做到，对吗？作为程序员，我们一般认为应用程序终 Ih 前有-个事件会被 
引发。该事件 uj ■以用来将未保存的数据保存在应用程序的存储中，以便在程序 下次 运行时 
将这些数据恢笈。 

问题在丁•没有这柞的事件。 

但有一个: U 件通知应用程序即将挂起 ( suspend )。 应用程序在被彻底终 lh 之前，总会 
先进入挂起状态(除非应用程序以 非正常 方式终 It, 如崩 溃)， 但挂起 并小总 味着程序即将 
终 lb 还有一个事件可能在程序挂起 JT ； •通知其即将被恢复 ( resume )。 

程序在后台不运行时会被拃起(如切换令 Windows “开始”屏幕或在埚辂灰边缘滑动手 
指将另一个程序切换辛:前台)。按组合键 AII + F 4 终止应用程序或使 il •算机进入休眠状态， 
程序也会先被挂起。不论何种原因引发扞起.在程序被真 iH 挂起前冇10秒左右的延迟，以 



防 lh 中断 Windows (和应用程序)正在进行的工作。 

程序挂起之沿吋能被恢复，也可能被 终止。 程序挂起后可能历经较长一段时间才会恢 
复或终 II :。由丁-没有通知程序即将被终止的事件，应用程序必须通过挂起来保存未来进行 
恢复所必耑的数据。程序有可能挂起还未完成就被终 ih 。 （现在或许吋以在一定程度 h 理解 
为什么没有专门用丁-通知程序终止的 事件： 如果程序已挂起，为引发终止事件 ， Windows 
要先恢复应用程 序。） 

为此 ， Application 类定义了两个事件 : Suspending 和 Resuming。Suspending 事件的重 
要性 远远离 P Resuming 龙件。应用程序通过 Suspending 事件将未保存的状态保存在应用 
程序的本地存储中。应用程序+需要在 Resuming ’]* 件中恢复这些数据， Windows 会自动完 
成这项 I : 作。 但应用程序需要在下次运行时加载数据。 

应用程序吋以选择在 Suspending 窜件发生时执行其他任务(如尝试释放较大的、可以重 
新创建的资源，从而减少其对内存的占用)，而在 Resuming 事件发生时撤销所执行的仟务 
或执行某鸣刷新 I :作(如将来自 Web 源的数据刷新到界面)。 

应用程序 M 过 Visual Studio 调试器运行时挂起和恢复的方式~独、 X 运行时所采用的方 
式何所不同。独立运行的应用程序在后台会挂起，而通过 Visual Studio 调试器运行的应用 
程序 不会。 

另一点+同在亍：如果程序异常终程序+会在终 It 之前被挂起。未处理异常或使 
用 Visual Studio 的“停 lh 调试”功能(在实践当中町以留意一下)都会导致非正常终止。 

然而，如果通过组合键 Alt + F 4 终 lh Visual Studio 调试器运行的应用程序，程序会收 
到 Suspending 事件，然后终止,这个过程大概耗有10秒。在这段时间内 , Visual Studio 仍 
然会认为程序正在运行。 

为解决调试的小便 ， Visual Studio 提供了名为“调试位置”的 T . 具栏，可以用来手动 
执行“挂起” ( Suspend ), “继续” （ Resume ) 和“挂起并关闭” (Suspend And Shutdown ) 命 
令。当程序通过调试器运行时，这些命令在幵发与挂起和恢复相关的代码时极为有用。 

通过 Visual Studio 运行的程序巧、容易观察到常规的 Suspending 和 Resuming 衷件 ，闲 
而这里提供.个实验程序，将这些事件的 H 志记录在应用程序的本地存储中。建议脱离 
Visual Studio 调试器运行此程序。 

不•例项丨丨 SuspendResumeLog 的 XAML 中仅包含一个 只读的 TextBox 。 


项 H: SuspendResumeLog | 义件： MainPage.xaml ( 片段 } 



AcceptsReturn="True" 
IsReadOnly="True" /> 


对应的代码隐藏文件订阅 / 3 个唞 件: MainPage 的 Loaded 事件(仅在程序启动时执行, 
并目 - K 执 if •次) 以及当前 Application 对象的 Suspending 和 Resuming 車件。所有 :1 i 件都会 
it ； 朵到应用程序木地存储的 logfile . txt 文 件中。 

项 II: SuspendResumeLog | 义件： MainPage.xaml_cs ( 厂 i ‘ 段） 
public sealed partial class MainPage : Page 


StorageFile logfile; 
public MainPageO 
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this.InitializeComponent(); 

Loaded += OnLoaded; 

Application.Current.Suspending +* OnAppSuspending; 

Application.Current.Resuming += OnAppResuming; 

) 

async void OnLoaded(object sender, RoutedEventArgs args) 

( 

// Create or obtain the log file 

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
logfile = await localFolder.CreateFileAsync("logfile.txt", 

CreationCollisionOption.OpenlfExists); 

// Load the file and display it 

txtbox.Text = await FilelO.ReadTextAsync(logfile); 


// Log the launch 

txtbox.Text += String.Format("Launching at {0}\r\n", DateTime.Now.ToString()); 

await FilelO.WriteTextAsync(logfile, txtbox.Text); 

) 

async void OnAppSuspending(object sender, SuspendingEventArgs args) 

{ 

SuspendingDeferral deferral = args.Susp>endingOperation.GetDeferral(); 

// Log the suspension 

txtbox.Text +« String.Format("Suspending at {0}\r\n", DateTime.Now.ToString()); 

await FilelO.WriteTextAsync(logfile, txtbox.Text); 

deferral.Complete(); 

) 

async void OnAppResuming(object sender, object args) 

( 

// Log the resumption 

txtbox.Text += String.Format("Resuming at (0>\r\n", DateTime.Now.ToString()); 

await FilelO.WriteTextAsync(logfile, txtbox.Text); 

) 

) 

Loaded 車件被引发后.程序会获取代表当前应用程序木地存储的 StorageFolder 对象， 
然后创建名为 logfile.txt 的文件。 itl - 将枚平値 CreationCollisionOption.OpenlfExists 传入 
CreateFileAsync 方法，在文件己存在的情况卜'(如程序第二次运行及后续的 运行) 该方法与 
GetFileAsync 是等效的。 

OpenlfExists 枚平成员的名称并不十分准确。通过该枚乎访问文件时文件并没有打开供 
读写，因而将该枚平命名为 GetlfExists 吏为贴切。若所要获取的文件不存在， 
CreateFileAsync 方法则会创建长度为苓的文件，并获取对该文件的引用。 
HlelO . ReadTextAsync 和 FilelO . WriteTextAsync 方法会真正打开文件，并在分别完成读和写 
之后将文件关闭。 

请注总 Suspending ' If 件处理程序中的 SuspendingDeferral 对象。如果没 ft 此对象， 
Windows 会认为 Suspending 处程序在调用 WriteTextAsync 时便 lL 完成， W 为调用该方法 
时该处理程序首次退出。 

一般而言，如果程序在本地存储中维护数据，只需要在 Loaded 事件(或其他初始化劳 
件)被引发时加战数据，并在 Suspending _'| J 件发生时保#数据。 SuspendResumeLog 程序作 
Loaded If 件和 Resuming 事件发生时都保存了数据。该程序是为在 Visual Studio 调试器以 
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外的环境下运行而设计的。之所以随时保存数据是考虑到程序可能通过 Visual Studio 调试 
器运行且被 “ 停止调试”终止。否则，若这样终止程序， Suspending 处理程序是不会被调 
用的，进而造成数据丢失。 

若在 Visual Studio 调试器环境中测试程序的数据保存与恢复，最好养成使用 “ 挂起并 
关闭”命令来终止程序的习惯，而不要使用“停止调试”。 

h 面使用 FilelO . ReadTextAsync 的那段代码可以荇换为 T 面…行。 

txtbox.Text = await PathIO.ReadTextAsync("ms-appdata:///local/logfile.txt"); 

使用 FilelO . WriteTextAsync 的那段代码可以替换为下面一行。 

await PathlO.WriteTextAsync( M ms-appdata : ///local/log file.txt w , txtbox.Text); 

前缀 ms - appdata 表示应用程序的独立存储。在程序中表现为文件 H 录。根据 C 1 录所属 
类别的不同，其名称 hJ ■能为 local 、 roaming 和 temp 。 即便使用这种 UR 1 来读写文件内容， 
仍需要通过 StorageFolder 的方法来创建 StorageFile 对象。 

在正常情况下，更新 H 志文件的代码需耍向现有文件追加文本。 HlelO 和 PathlO 都有 
追加文本的方法，但 SuspendResumeLog 程序并未采用。除了该程序所采用的方式外， uJ ' 
以将同样的文木同时追加到 TextBox 和曰志文件，也可以在每次追加后将文件電新加战到 
TextBox 。 

SuspendResumeLog 程序仅包含一个 TextBox , 并将内容#储在应用程序的独立存储中。 
4例项 II QuickNotes '-j SuspendResumeLog 类似 。 QuickNotes 允许用户在 TextBox 屮输入 
内容，并能够 Q 动保存，以便下次打开程序时 S 现之前的内容。这个示例程序的 XAML 文 
件如下所示。 

项 H: QuickNotes | 文件： MainPage.xaml ( 片段） 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 



对应 的代码隐藏文 件通过 FilelO . ReadTextAsync 来读取文 件内容(吋以借助丁•现 有的 
StorageFile 对 象)， 通过 PathlO . WriteTextAsync 来向文 件写入 内容。 

项 H: QuickNotes I 文件： MainPage.xaml.cs (片 段） 
public sealed partial class MainPage : Page 
{ 

public MainPage() 

{ 

this.InitializeComponent(); 

Loaded += OnLoaded; 

Application.Current.Suspending += OnAppSuspending; 


async void OnLoaded(object sender, RoutedEventArgs args) 

i 

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 

StorageFile StorageFile = await localFolder.CreateFileAsync("QuickNotes.txt ", 

CreationCollisionOption.OpenlfExists); 
txtbox.Text = await FilelO.ReadTextAsync(StorageFile); 
txtbox.SelectionStart = txtbox.Text.Length; 
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async void OnAppSuspending(object sender, SuspendingEventArgs args) 

{ 

SuspendingDeferral deferral = args.SuspendingOperation•GetDeferral(>; 

await PathIO.WriteTextAsync("ms-appdata : ///local/QuickNotes.txt", txtbox.Text); 

deferral.Complete<); 


7.12 自定义的异步方法 

前 【 fti 演示了如何编写后缀为 Async 的异步方法，如何在这些方法中调用其他异步方法。 
这些异步方法本身的代码可以运行在 UI 线程上，而它们所调用的其他异步方法则在 +同线 
程上运行。 

应用程序有时需要执行一些耗时的仟务. HJ •能阻* U 1 线程。若能将毎个耗时的任务拆 
分成若 T 小块，则以使用 DispatcherTimer 炎或 CompositionTarget.Rendering 件来分别 
运行。虽然事件处理程序运行在 UI 线程上，但任务本身会通过某种方式运行在其他线程 
上，从而使用户界面保持可响应状态。 

我们可以&己想办法让任务运行在工作线程 t 。为此，可以利用 
Windows . System . Threading 命名空间卜'的 ThreadPool 类，也可以利)_1]功能更为强大的 
Task (稍 后演示)。 

Task . Run 方法最简单的軍载只有一个 Action 类型的参数(代表没有参数 fl 没有返回值 
的委 托). 能够利用线程池中的线程来运行通过参数指定的方法。我们-•般通过 Lambda 函 
数来指定该参数。 

假设有一个叫能耑要运行很久的方法(吋能有几个参 数)。 


// ... heavy processing job 

) 

该方法+应直接运行在 Ul 线程上，但可以将该方 法置于 Lambda 函数体中，将 Lambda 
函数传入 Task . Run , 并通过 await 运算符等待其运行完毕。 

await Task.Run (() *^BigJob ("abc", 555"; 

由于 Task . Run 在工作线程 L 运行 BigJob 方法，因而该方法+能包含任何访 H 用户界 
曲对象的代码。（如果确实包含访问用户界面的代码，则需要通过 CoreDispatcher 的 
RunAsync 方法运行。如果需要在 RunAsync 调用过程中通过 await 等待 BigJob 运行完中 
则必须用 async 来修饰 BigJob 方法并使该方法返回 Task 对象。> 

再举一个耗时方法的例子，但这一次方法有返回值。 


double 







W . 然，我们+希領在 U 1 线程上调 ffl 这个方法，但 IIJ ■以 M 过 Task . Run 来运行它。 

double rnagicNum = await Task.Run (()=> 



这段代码将 CalculateMagicNumber 方法的调用放在 Lambda 函数的体中，并将 
Lambda 函数传入 Task . Run。CalculateMagicNumber 返回类吧是 double ， 闽而 Task.Run 返 
回类型为 Task < double > 0 应注总的是， await 运兑 符返冋的是 CalculateMagicNumber i \ W^l 
到的 double 值。 

我们也以像 Fllli 这样定义 个异步 方法 CalculateMagicNumberAsync 。 

Task<double> CalculateMagicNumberAsync(string str, double x) 



W 而我们便以像卜'面这忭也 ui 线程 I +. 调用此方法。 

double rnagicNum = await CalculateMagicNumberAsync("xyz", 333); 

我们也可以将上述方法合并为一个。 

Task<double> CalculateMagicNumberAsync(string str, double x) 

{ 

return Task.Run(()=> 

( 

double magicNumber =0; 

// ... big job in non-UI thread 
return magicNumber; 

))； 

) 

如果 il •算过程中 需要调 用其他异步方法， Nf 以使 ffl await 来调用，并使用 async 来修饰 
Lambda 函数。 



return Task.Run(async () => 

{ 

double magicNumber = 0; 

// ... big job with await' s 
return magicNumber; 

})； 

) 

如果涉及取消和进度报告功能，这种中.一方法的编码形式 iif 以降低实现难度。 
有的异步方法吋能包含某种循环。 

Task<double> CalculateMagicNumberAsync(string str, double x) 



double magicNumber = 0; 


return magicNumber; 

n ； 

} 

循环非常适合用来实现撤销检査和进度报告功能，但应谨慎。我们不希望以每秒上千 
次(可能 过快) 或每五秒一次 ( nj •能过慢)的频率来进行撤销检杏或进度报告.通常一秒一次或 
一秒几次为宜。对于要进行上千次或上百万次的循环，需要通过某种逻辑来检查撤销操作 
或报告进度(例如在循环变量•以被100整除时进行)。 

为使此方法能够被撤销，可以添加一个 CancellationToken 类型的参数，并在适当位 W 
调用该参数的 ThrowIfCancellationRequested 方法。 

Task<double> CalculateMagicNumberAsync(string str, double x, 

CancellationToken cancellationToken) 


double magicNumber = 0; 
for (int i = 0; i < 100 ; i++) 

{ 

CancellationToken.ThrowlfCancellationRequested(); 


}, CancellationToken); 

) 

请注意， CancellationToken 参数作为第」个参数传至 Task . Rim 。 这样，如果任务在开 
始时就被撤销，则任务不会被执行。 

这样- 来，我们需要在调用 CalculateMagicNumberAsync 方法时通过 S 后一个参数传 
入 CancellationToken 对象。为共享 CancellationToken 对象，需要将其声明为 字段。 

CancellationTokenSource cts; 

事实上，这个变量必须声明为字段，因为触发撤销的方法要访问它(这很有可能是用户 
的操作)。 

void OnCancelButtonClick(object sender, RoutedEventArgs args) 


调用 CalculateMagicNumberAsync 之前，必须先创建 CancellationTokenSource 对象，将 
被调用的方法 K P try 块中，并将该对象的 Token 属性传入被调用的方法。 


double magicNum 
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other exceptions logic 


一旦 CancellationTokenSource 的 Cancel 方法被调用，在执行到 CancellationToken 对象 
的 Throw IfCancel lation Requested 方法时便会有异常抛出。该昇常的类型为 
OperationCanceledException . 会被调用异步方法的代码 接收。 其他可能的异常也应一并通 
过 catch 块捕获。 

若希望异步方法能够报告进度，可以为该方法添加另一个专用的参数，它的类型为 
lP r 0 gre SS < T >。 该泛型接口的类型参数 T 为进度值的类型， 一般为 double 类墦。取值范围 
是从0到1,还是0到100,这完全取决于开发者。如果是后一种情形， T 可以是 int 。 有 
甚者将 T 指定为 bool 类型，用 true 表示任务完成。 

报告进度可以在一个适当的位置进行(如在进行撤销检杏之 前)。 

Task<double> CalculateMagicNumberAsync(string str, double x, 

CancellationToken cancellationToken, 

IProgress<double> progress) 



double magicNumber = 0; 


for (int i = 0; i < 100; I++) 

{ 

CancellationToken.ThrowlfCancellationRequestedO; 
progress.Report((double)i); 

// ... big job with await* s 

} 

return magicNumber; 

}, CancellationToken); 

) 

这段代码只是将范 [%1 在 0 到 100 的循环变量转换为 double 类型来表示进度(这样可以莨 
接设 S ProgressBar 的 Value 属件)。在某4情况 K , 吋能； T 要有意地在方法幵始处报告最小 
进度值，而在方法最后报告最大进度值。 

我们还耑要 一个敁 示进度的方法，该方法应接受进度值类型的参数。 

void ProgressCallback(double progress) 



这个方法应在 UI 线程 h 调用。 

作调用 CalculateMagicNumberAsync 时(就像在前 l / lhry 块中那样调用)，志要通过刚刚 
定义的回调方法创建一个 Progress 类艰的对象，并将该对象作为最后一个参数传入 
CalculateMagicNumberAsync 方法。 

M 水进度的回调不一定要单独定义，也■以使用 Lambda 表达式。 

magicNum = await CalculateMagicNumberAsync("xyz", 333, cts.Token, 

new Progress<double>((percent) => progressBar.Value = percent)); 


K 面让我们来看一个更为完整的例子。 

演示异步操作最困难的地方在于如何找到一个适当的例子，执行需要耗费一定时间而 
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又简单易憚。这里要有意编写一些效率较低的代码，一是为肉眼能够观察到 ProgressBar 的 
变化，二是为中-击 Cancel 按钮留出时间。 

示例项目 WordFreq 能够读取文本文件并计算词频。这里用的文本文件是来自著名的 
Project Gutenberg 网站的纯文本电子 t 5， 即赫尔曼 • 梅尔维尔 (Herman Melville ) 的《內®京》 
(Moby-Dick), 该程序要统计毎个词(如 “ whale ” >在书中出现的次数。事实上， WordFreq 
程序硬编码了《白鲸》这部小说。 

GetWordFrequenciesAsync 方法有一个 .NET Stream 类型的参数，因为该方法需要通 
过 .NET 中的 StreamReader 来逐行读取电子书文件。该方法还接受 CancellationToken 和 
I Progress 类切的参数。 

此方法返回的结果有些细碎，因而这甩通过 .NET 中的 Dictionary 对象来聚合文本文件 
中的单词。该方法最后通过 LINQ 中的 OrderByDescending 方法按字典中“值”的大小对 
字典项进行排序，即词频 A 的单词排在最前面。结果是以下类型的粜合。 

KeyVa 1 uePair<string , int> 

OrderByDescending 实际返回的集合为泛靖类型 lOrderedEnumerable 的对象。 

IOrderedEnumerable<KeyValuePair<string, int» 

也就是说 GetWordFrequenciesAsync 方法返回的是卜_曲这个类型。 

Task<IOrderedEnumerable<KeyValuePair<string, int>» 


这个方法的完整代码如 F 所示。 


项 H : WordFreq I 文件： MainPage.xaml.es ( 片段 } 

Task<IOrderedEnumerable<KeyValuePair<string, int»> GetWordFrequenciesAsync(Stream stream. 



IProgress<double> progress) 


return Task.Run(async ()'=> 




CancellationToken.ThrowlfCancellationRequestedO; 
progress.Report(100.0 • stream.Position / stream.Length); 


line.SplitC ' 





(dictionary.ContainsKey(charWord)) 
dictionary[charWord] += 1; 


// Return the dictionary sorted by Value (the word count) 
return dictionary•OrderByDescending(i => i.Value); 

),cancellationToken); 

) 

注意，传入 Task . Run 的方法体通过 await 运算符来调用 StreamReader 的 ReadLineAsync 
方法。该方法读取文件中的毎一行前都会检丧 CancellationToken , 并根据 Stream 对象读取 
文件的多少来报告进度(百分比形 式 )。 Project Gutenberg 的《白鲸》电子版本大约有两万两 
千行。为了使代码简单明了，这里没有降低对这两个方法的调用频率，因而 M 得过亍频繁。 
若要减少两者的调用次数吋以跟踪文件读取的行数。 

此方法木身没有进行异常处理。如果 StreamReader 的构造函数或 ReadLineAsync 抛出 
异常，则 要巾主 调方法处理。 

WordFreq 程序的 XAML 定义了 Start 和 Cancel 按钮(后者圾初被禁用)、用于报告进度 
的 ProgressBar , 用于报告错误的 TextBlock 以及 ScrollViewer 中用干展示词频结果的 
StackPanel 。 

项 S: WordFreq | 文件： MainPage.xaml ( 片段） 



</Grid.C 


Grid.Row-"0" Grid.Column= ,, 0 M 
HorizontalAlignment="Center" 


Name="cancelButton" 
Content* M Cancel" 
Grid.Row= w 0" Grid.Co 
IsEnabled="false" 
HorizontalAlignment= 
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TextWrapping="Wrap M /> 


<ScrollViewer Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"> 
<StackPanel Name^'^tackPanel" /> 



除了 GetWordFrequenciesAsync 方法外，代码隐藏文件中还包含几个实现操作撤销和进 
度报告的方法。 

項月 : WordFreq I 文件： MainPage.xaml .cs ( 片段 } 
public sealed partial class MainPage : Page 

l 

// Project Gutenberg ebook of Herman Melville's "Moby-Dick" 

Uri uri = new Uri("http://www.gutenberg.org/ebooks/2701.txt.utf-8">; 

CancellationTokenSource cts; 


public MainPage() 



Task<IOrderedEnumerable<KeyValuePair<string, int»> GetWordFrequenciesAsync (Stream stream. 

CancellationToken cancellationToken, 
IProgress<double> progress) 


这里要特别说明一 K Start 按钮的 Click 处理程序。该处理程序在程序运行过程中吋能 
被执行多次，但它是不可重 入的。 也就是说，在它执行完成之前，不能执行 K 一次。这个 
处理程序的主耍作用是操纵界面元素，包括初始化 StackPanel , 初始化 ProgressBar , 以及 
启用和禁用 按钮。 所有文件访问及对 GetWordFrequenciesAsync 的调用，都是在 try 块中进 
行的。 

项 H: WordFreq | 文件： MainPage.xaml.cs ( 片 段） 

async void OnStartButtonClick(object sender, RoutedEventArgs args) 



startButton.IsEnabled = false; 

IOrderedEnumerable<KeyValuePair<stcing, int» wordList = null; 
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using (IRandomAccessStream raStream = await streamRef.OpenReadAsync()) 


using (Stream stream = raStream.AsStream ⑴ 


cancelButton.IsEnabled = true; 



wordList = await GetWordFrequenciesAsync(stream, cts.Token, 

new Progress<double>(Progressesllback)); 



progressBar.Value =0; 
cancelButton.IsEnabled = false; 
startButton.IsEnabled - true; 



progressBar.Value = 0; 
cancelButton.IsEnabled = false; 
startButton.IsEnabled = true; 



// Transfer the list of word and counts to the StackPanel 
foreach (KeyValuePair<string, int> word in wordList) 



StackPanel.Children.Add(txtblk); 



这 m 遇到一个问题：当异步方法返回后， click 处理程序需要将返回的键值对填入 
StackPanel «这项工作是在处理程序尾部的 foreach 块中完成的。 foreach 循环会频繁地操纵 
用户界面1•.的对象(创建 TextBlock 并将其添加至 StackPanel ), 并且该操作+能在 U 1 线程以 
外的线程 h 执行。即便对《內鲸》的词频结果进行筛选限制(正如尔例程序所做的)，耍敁 
示的间条也将近一万个。这样的循环 hJ ■能会造成用户界血被阱塞，进而无法响应用户输入， 
甚辛:还会导致词条在较长一段时间内无法敁¥到界 Ml :。 

有一个语句可以提供一种解决方案(吋能不是最好的>。 



通过 await 调用此方法为 U 1 线程上的其他代码的执行留出了机会。其他代码执行完毕 
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IS , 控制权会 CTf 回到这里。就本小•例而 a ，所谓的“其他代码”包括 StackPanel 类中实 
现对作为子元桌的 TextBlock 进行布局的代码以及 允许用 户滚动 ScrollViewer 中的 
StackPanel 的代码。 

矜斗^每川 Task . Yield . 则无法在 ProgressBar 达到最大 ffl 后的5秒内间条列表 。反 
复调用 Task . Yield 会在很大程度上减慢循环的速度。虽然循环要花更长时间才能完成(通过 
进度变化和 Start 按钮屯新恢的时间可以感受得 到)， 但却可以立即让 ffl 户看到效果。 
此外.用户还能够在循环完成之前滚动同条列表。圾终我们■以#到 whale 一次出现/ 963 
次(见 F 图)。 



还有一种解决方案，甚至不用 StackPanel 。 正如第11章要介绍的,有专门 用丁显 示列 
表项的控件。这些控件利 ffl VirtualizingStackPanel 面板，仅加战用户潸动出来的列表项。 

M 然 Windows 8、 . NET 和 C # 的改进使异步方法的使用变得相当简便，但我们仍耑注 
意细竹并进行测试。平例来说， GetWordFrequendesAsync 在本人的•算机 I •.要花二.四秒的 
时 M 才能完成。然而，如果将撤销检丧和进度报告功能 i •掉，该方法在一秒内就能完成。 
小知读荇怎么肴， W 本人对-•秒内能完成的异步方法实现撤销检作和进度报告的做法表小 
怀疑。 

权衡这些问题并+容易，之所以这样是 W 为一个矛盾的 存在： 人们希望计算机完成尽 
吋能多的任务，01希望它看 hi 好像是闲着的。我们应使 Windows 8应用程序看 I :去能够 
承担繁®的仟务而小会被 k 住，这仍然是一项挑战。 
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组合第4章以及第5章所提到的 儿袭、 控件和 ffl】 板，就可以在页面I:构造出完牿的用 
户界 [ft' 。但是许多程序都喜欢把大多数命令和程序选项保持隐藏状态，而在用户明确需嬰 
时才出现。 

过去的 Windows 应用程序一般使用菜中.和对话框来合并命令和选项。顶级菜单总是坷 
见，而实际命令通常在下拉子菜单上。一些 菜中命 令会泊用对话框呈现一组相关程序选项。 

而 Windows 8强调应用内容，而不是强调好看。在许多情况下，以前应用菜申.上的程 
序选项会移到应用栏，而应用栏通常是隐藏状态.但如果用户在屏籍顶部或底部边缘滑动 
手指或 者移动 鼠标指针到应用栏位 S, 就会趵用应用栏。应用栏是 ContentControl 的派生 
类，称为 AppBar, 本章会展示如何使用。 

此外， Windows 8程序町以用简中.的 PopupMenu 类哦对象来显尔命令列表（通常用作 
快捷菜申 .)， 或荠通过 Popup 元索向用户提供史广泛的控件集合。本章会展示如何使用这两 
种弹出式窗口。 

木章结尾会给出木 1MJ 前最全的应用 XamlCruncher , 该程序可以用 XAML 进行交亙 
实验。 


8.1 实施快捷菜单 


快捷菜中是点击鼠标右键或者用“按住-保持-松开”手势而被《用的菜单。在屏嵇被 
触碰 的位置 弹出快捷菜中 .， 而如果选样其中的一个命令，快捷菜单一般会随之消失。快捷 
菜单通常 b 特定控件或中.个控件的特定区域相关，这就是“快捷”名称的由来。 

TextBox 控件包含一个快捷菜单。运行本书中使用 TextBox 的仟何程序就能看到。在 
其中输入并选中一些文本，再右键单击控件或执行“按住-保持-松开”手势，就会出现一 
个菜中取决 r 所选内容和剪贴板状态.菜中 .a 多包含下阁所示的 k 项命令。 


Let's 



ontext menu! 
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为获得定制快捷菜中-，需要创建 PopupMenu 类型的对象。 Windows . UI . Popups 命名空 
间、 MessageDialog (第7章提到过)和 UlCommand 共冋定义了该类，可用来在 MessageDialog 
和 PopupMenu 中具体指定命令。 

PopupMenu 派生自 Object , W 此不大 uj •能会在 XAML 文件可视树中进行实例化。相反， 
你可能想在启用的时候完全用代码来构造 PopupMenu 对象，而最有可能的就是响应 
RightTapped 事件的时候。 

以下 XMAL 文件中包含位丁-页面中央的 TextBlock 以及 RightTapped 负件处理 程序： 

项 H: SimpleContextMenu | 文件 ： Main Page, xaml (片段 > 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<TextBlock Name="textBlock" 

FontSize="24" 

HorizontalAlignment="Center" 



RightTapped= M OnTextBlockRightTapped"> 

Simple Context Menu 
<LineBreak /> 

<LineBreak /> 

(right-click or press-and-hold-and-release to invoke) 



</Grid> 

使用 MessageDialog ， 通过 UlCommand 实例来显示菜单 h 要出现的命令。调用 
ShowAsync 来 

项 H: SimpleContextMenu I 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
i 

public MainPage() 

{ 

this.InitializeComponent(); 


async void OnTextBlockRightTapped(object sender, RightTappedRoutedEventArgs args) 

{ 

PopupMenu popupMenu = new PopupMenu(); 

popupMenu.Commands.Add(new UlCommand("Larger Font"/ OnFontSizeChanged, 1.2)); 
popupMenu.Commands.Add(new UlCommand("Smaller Font", OnFontSizeChanged, 1 / 1.2)); 
popupMenu.Commands.Add(new UICommandSeparator()>; 

popupMenu.Commands.Add(new UlCommand("Red", OnColorChanged, Colors.Red)); 
popupMenu.Commands.Add(new UlCommand("Green", OnColorChanged, Colors.Green )); 
popupMenu.Commands.Add(new UlCommand("Blue", OnColorChanged, Colors.Blue)); 

await popupMenu.ShowAsync(args.GetPosition(this)>; 


void OnFontSizeChanged(IUICommand command) 

{ 

textBlock.FontSize *= (double)command.Id; 


void OnColorChanged(IUICommand command) 

{ 

textBlock.Foreground = new SolidColorBrush((Color)command.Id); 


注意， UlCommandSeparator 对象在菜单中创建了一条水平线。 

通过 MessageDialog，ShowAsync 调用返回 lAsyncOperation < IUICommand >类型的对 
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象，从而 uj ■以获取用户所选命令。而我选择为 UlCommand 构造函数中的命令指定两个定 
制处理 权序， 我还使用该构造函数的第■.个变儿来指定值，以帮助处理程序尽 KJ ■能简中-的 
处理命令。 

ShowAsyn 方法篇要 Point 值來确定在哪 1 W / 小菜中 .。这个点应该和应用窗口相对，通 
常就是和 Kifii 相对。菜笮一般以此点水 f - 居中而垂直店上。迮触摸界面 I :这么做是有道理 
的： 你+ 会希销 用户的手盖住 菜中！ 


心击 Simple 的 ‘ S ’ 顶部，菜中.会如卜'图所术。 



当然，如点击 TextBlock 之外的地方，什么也+会出现。 

如果所指定的点太靠近窗口4边缘、顶部或者右边缘，菜中.位背会自动转移，菜单就 
+会被截断。尤论 RequestedTheme 是什么值，白色背谡上的菜单总是显示为黑色文字。 

菜中.提供 f 键盘接 U , 但也没什么 特别： uf 以 ffl 方叫键在条 H h 移动选项，并按 Enter 
键选屮。选择命令之 G ， 轻点或者点击菜中.之外的仟何地方或者按键盘 k 除 Enter 之外的 
任, S 键， 菜中部 &消失。如果选样处理 ShowAsync 返回的 lUICommand 对象，而如果没有 
选抒命令就释放菜中 .， 该对象会为空。 

PopupMenu 的今部功能袖本就这么多。 ShowForSelectionAsync 是 55 —种 W 用菜中.的唯 
■•方 法。这种方法需要 Rect 值和 Placement 可选枚举值，包括 Default , Above 、 Below、Left 
和 Right 。 这只是偏好位 W : nj •以选抒实阮位宵，以便幣个菜中.出现在程序窗口内。 

如采 PopupMenu 处 T •禁用状态，则小能其中仟何命令。如采丨丨前+适用特定命令， 
就+要将它包括在菜中.中！ 

也+能用选中标记来记承被选中的命令项 U 。如果想•的不只是简 中命 令，就志要 

从 PopupMenu 升级到 Popup » 


8.2 Popup 对话框 


Popup 类(派生1^ FrameworkElement ) 是 Windows Runtime 最接近于传统对话框的类。 
Popup 有 UlElement 类喂的 Child _性，吋以设 W . 为包含很多控件的 Panel ， 或奔设筲为 Panel 
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子类的 Border 。 

SimpleContextDialog 和之前项目的功能一样， XAML 文件也非常 相似: 

项 M: SimpleContextDialog | 义件 ： Main Page, xaml ( 片段） 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 



FontSize="24" 

HorizontalAlignment="Center" 

VerticalAlignment=.’Center" 

TextAlignment= M Center" 

RightTapped="OnTextBlockRightTapped"> 

Simple Context Dialog 
<LineBreak /> 

<LineBreak /> 

(right-click or press-hold-and-release to invoke) 



</Grid> 

TextBlock 中的 RightTapped 事件处理程序在 SlackPanel 甩集合了两个 Button 控件和三 
个 RadioButtoni StackPanel 由设置为 Popup 的 Child 属性的子 Border 构成。这部分代码比 
较多，而代码较少的部分是 Button 控件的 Click 处理程序和 RadionButton 控件的 Checked 
处理程序。 

项月 ： SimpleContextDialog | 义件： MainPage.xaml.cs ( 片 段〉 
public sealed partial class MainPage : Page 
{ 

public MainPage() 

I 

this.InitializeComponent(); 


void OnTextBlockRightTapped(object sender, RightTappedRoutedEventArgs args) 

( 

StackPanel StackPanel = new StackPanel(); 


// Create two Button controls and add to StackPanel 
Button btnl * new Button 
{ 

Content «= "Larger font". 

Tag = 1 . 2 , 

HorizontalAlignment ■ HorizontalAlignment.Center, 
Margin = new Thickness(12) 

)； 

btnl.Click += OnButtonClick; 

StackPanel.Children.Add(btnl); 


Button btn2 = new Button 

( 

Content = "Smaller font". 

Tag = 1 / 1 . 2 , 

HorizontalAlignment = HorizontalAlignment.Center, 
Margin = new Thickness(12) 

}； 



StackPanel.Children.Add(btn2); 


// Create three RadioButton controls and add to StackPanel 
string[] names = { "Red", "Green", "Blue" 

Color 【】 colors = ( Colors.Red, Colors.Green, Colors.Blue }; 

for (int i = 0; i < names.Length; i++) 


RadioButton 
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Content = names[i 】， 

Foreground - new SolidColorBrush(colors[i]), 

IsChecked = (textBlock.Foreground as So1idColorBrush>.Color — colors[i], 
Margin = new Thickness(12) 

radioButton.Checked += OnRadioButtonChecked; 
stackPanel.Children.Add(radioButton); 


// Create a Border for the StackPanel 
Border border - new Border 
{ 

Child - stackPanel, 

Background » 

this.Resources["ApplicationPageBackgroundThemeBrush"] as SolidColorBrush, 
BorderBrush = this.Resources{"ApplicationForegroundThemeBrush"J as SolidColorBrush, 
BorderThickness = new Thickness(1), 

Padding = new Thickness(24 ), 

)i 

// Create the Popup object 
Popup popup = new Popup 
( 

Child = border, 

IsLightDismissEnabled = true 


// Adjust location based on content size 
border.Loaded += (loadedSender, loadedArgs)=> 


Point point ■ args.GetPosition(this); 
point.X _= border.ActualWidth / 2; 


point.Y -= border.ActualHeight; 

// Leave at least a quarter inch margin 


>pup.HorizontalOffset = 

Math.Min(this.ActualWidth - border.ActualWidth - 24, 


Math.Max(24, point.X)); 


popup.VerticalOffset = 

Math.Min(this.ActualHeight - border.ActualHeight - 24, 
Math.Max<24, point.Y)); 


// Set keyboard focus to first element 
btnl.Focus(FocusState.Programmatic); 

»； 


// Open the popup 
popup.IsOpen = true; 


void OnButtonClick(object sender, RoutedEventArgs args) 
i 

textBlock.FontSize *= (double)(sender as Button).Tag; 

) 

void OnRadioButtonChecked{object sender, RoutedEventArgs args) 

{ 

textBlock.Foreground = (sender as RadioButton).Foreground; 


为了定位 Popup , 就需要设胃.相对于程序窗口的 HorizontalOffset 和 VerticalOffset 属性 
值。然而，如果不知道 Popup 中有多少内容，就无法智能设 S 这些属性，而且-•般要先显 
示 Popup , 才知道有多少内容。出丁•此原因，以上代码设胃了 Popup 内容元素 Border 的 Loaded 
处理程序。 Popup 定位在 t 触点正上方(很像 Pop 叩 Menu ), 但也允许 Popup 和程序窗口之 



间至少冇 24 个像#留白。 

RightTapped 处理程序运彳/结果把 Popup 的 IsOpen M 性设界为 true . Popup 则在屏 
幕匕 正常情况 F , 用户仍然 " my 程序! 5 i ( ffi 的其他部分进行交4.。但要注意， Popup 的 
IsLightDismissEnabled .属性设背为 true 。 通过点 lit 或荇轻击 Popup 以外的区域，或者按 Esc 
键. 就会释放 Popup 。 如果没有设置这个屈性，就会显水多个对话框副木，很可能响应子 
控件卞件的时候，程序耑要设 W IsOpen M 性为 false 来移除 Popup 。 如采心 耍此信息川 f - 初 
始化或者淸屏， Popup 还定义 f Opened 和 Closed 厲性。 

点击心括号 h 方，字体已放大，如下图所示。 


Simple Context Dialog 

(right-click or press-hold-and-release to invoke) 


IJ J ' 以使用 Tab 键来浏览条 0 。默认怙况 K , 这些对话框和应用程序有相问颜色 七题， 
因此 • 使用像我写的 Border 能帮助在奴 |fii IHj ; •对话框。 

该对话框没有 OK 和 Cancel 按钮。而我用/以 h 方法来实施对话框，点击按钮会立即 
改变下面的 M 示，点击或轻击对话框之外的地方会关闭 Popup 。 如果对 话框比 较复杂，则 
需要一个按钮来恢 M 默 认值。 

当然，在代码中定义 Popup 的伞部内容是一件麻烦事。 史 常见的做法是专门为对活抿 
中定义 UserComrol 控件.冉实例 Popup 子类。然而，需要为该 UserControl 提供某种方式 
把用户选抒传给程序， iii 忭//法是 a 接或通 过视图投:式宋綁定对话框和应用。木章稍后会 
提到这两种方法的例 r -。 


8.3 应用栏 

Windows 8应用朽想通过类似传统菜 i 丫 i. 或 l:n 栏的方式来实施程序命令和选项。应用 
栏是称为 AppBar 的类，如果用户手指滑过屏铬顶部或底部，就会 A 用应用栏。应用栏 
以出现在豇血顶部、底部或#两者妝而有之。如采选抒了命令，应用栏 M 常会消失， 但也 
不是必须消失。 

Page 类定义丫两个属性， TopAppBar 和 BottomAppBar， 在 XAML 中 一 般设背为 AppBar 
标记。 AppBar 派生自 ContentControl , M 常会把 Content 厲性设符为包含 显示在 应用栏中控 
件的面板。 AppBar 没有固定高度，其高度柚 T •其承战的控件。 
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当然，探索 Windows 8自带的一些标准应用，是熟悉实际程序使用应用栏的最佳方法。 
大多数时候，应用栏包含一行圆形 Button 控件.但 Windows 8版本的 IE 浏览器中应用栏 
则说明应用栏 uj •以包含多种控件。在 1 E 浏览器中，底部应用栏包含可以输入 URL 的 
Textbox , 顶部应用栏显示已访问网页集合。 

以下程序提供了两个非常规的应 用栏： 

项 R: UnconventionalAppBar | 义件： MainPage.xaml ( 片段 } 

<Page ... > 

〈Grid Background="LightGray"> 

<TextBlock Name-"textBlock M 

Text="Unconventional App Bar" 

HorizontalAlignment= ,, Center M 

VerticalAlignment="Center'* 

FontSize="(Binding ElementName=slider, Path*Value)" /> 



<Page.TopAppBar> 

<AppBar Name="topi^>pBar’.> 



</AppBar> 

</Page.TopAppBar> 

< Page.BottomAppBar> 

<AppBar Name="bottomAppBar"> 

<StackPanel Orientation="Horizontal" 

HorizontalAl ignmen t- •• Ri gh t •• > 



Click= M OnAppBarButtonClick" /> 



Margin-"24 12" 

Click="OnAppBarButtonClick" /> 



Foreground*"Blue" 



Click="OnAppBarButtonClick M /> 

</StackPanel> 

</AppBar> 

</Page.BottomAppBar> 

</Page> 

屏幕中心位置有一个 TextBlock , 但其 FontSize 受限于 Slider . 而后者是顶部 AppBar 
中的唯一内容。第二个 AppBar 设置为 BottomAppBar 厲性，包含有三个 Button 控件的水平 
StackPanel , 这些 Button 控制在代码隐藏中共享--个 Click 处理 程序： 

项 R: UnconventionalAppBar | 文件： MainPage.xaml.cs ( 片 段 } 
void OnAppBarButtonClick(object sender, RoutedEventArgs args) 



—般情况 F , 处理应用栏比处理 Popup 或者 Pop 叩 Menu 简单得多，因为 AppBar 是贸 
血4视树的一部分，简化了绑定设1：和事件处理程序。应用栏通常+叮见，除非用户手指 




滑过屏幕顶部或者底部，这是控件在 AppBar 上和在界 ifil h 的唯一区别。此时，用户可以 
和控件进行交互，如下图所示。 


Unconventional App Bar 


应用栏和控件的着色取决 P 应用的 RequestedTheme , 在本程序中设置为 Light 。 主 Grid 
fid 了 LightGray 背贵，以对比那些颜色。使用应用栏的大多数程序好像都采用 Dark 主题。 

如果点击或者点按应用栏之外的任何地方，或荇按 Esc 键，应用栏会自动消失，并回 
到隐藏状态。如果+喜欢用这种方式关闭应 用栏， 可以把 AppBai •的 IsSticky 属性设冓为 
true 。 此时，为了去除应用栏，用户需要使用另一个手指滑过，或者需要把隐藏代码文件中 
—个或者两个 AppBar 对象的 IsOpen 属性设宵为 false 。 

有些情况 K , 程序 uj •能要用代码关闭 应用。 例如，在本特定程序中，为了改变文本颜 
色，用户需要滑动手指，以显示出应用栏，按一下按钮，再滑动另一个手指或按应用栏以 
外的地方以关闭应用栏。按按钮的时候， uj 以选择 用代码关闭应 用栏： 



RoutedEventArgs args) 



topAppBa r.IsOpen = false; 
bottomAppBar.IsOpen = false; 


这种方式很常见，如果厌倦了点击按钮来关闭应用程序栏，就耑要这柞做。然而，有 
时用户会发现设靑一行几个选项而 +盅要 m 新泊用应用程序栏非常方便。这就耍根据需要 
来判断了。 

程序第一次运行的时候，一些应用会要求用户与应用栏进行交4:。在这种情况以 
把 IsOpen M 件初始化为 true 。 就像 Popup — AppBar 初始化或者沾空时，会执行 Opened 
和 Closed 寧件。 


8.4 应用栏按钮样式 

许多 Windows 8应用只有底部应用栏， ffllfl ] 包含一行圆形 Button 控件。这些按钮通常 
是在圆圈中放一个符号，再加 I •.简短的文木命令。 
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圆形按钮苺丁- Standard.xaml 所定义的 Style , 键名为 AppBarButtonStyle 。 Standard.xaml 
文件位于 Visual Studio 所创建的 C#、Visual Basic 或者 C ++ Windows 8项 H 的 Common 文 
件夹中。该文件包含在 App . xaml 文件的 Resource 部分，任何 Windows 8应用都可以使用。 

AppBarButtonStyle Style 定义包含 ControlTemplate 长代码，定义 T 圆形按钮的视觉效 
果。看完第11章后，你可能想仔细研究 ControlTemplate 。 而同时，即使完全不了解该模板， 
也可以使用该 Style 。 

AppBarButtonStyle 包含一个 Setter 对象，可以把 FontFamily 设 K 为 Segoe UI Symbol . 

按钮上的符号会使用这些字体的字符。 

顾名思义 ， Segoe Ul Symbol 是符号字体。然而，它又不像那些用很多符号代替常见字 
母和数字的老式符号字体。该字体仍然有可以用 于常规 P 的之常规字符。但通过定义字符 
编码范围从 OxEOOO 到 0 xf 8 ff 为“私人使用区”， Unicode 标准允许这种字体定制字体。也 
就是说，这些字符编码为特定字型 。 Segoe UI Symbol 不使用定制宁体填满整个区域，但 
OxElOO 到 0 xElF 4 的范围是图形文字集合，能代表很多常见计算机仟务.因此适用丁-应用 
栏按钮^ 

例如，如果想显示一个按钮，按钮上有一个小房子和单同 “ Home ” ，用以 F 方法可以 
把这种按钮放到应用栏卜.。 


age•BottomAppBar > 
<AppBar> 


Style="(StaticResource AppBarButtonStyle J" 
Content 薦 "&#xE10F; •• 

AutomationProperties.Name="Home" 


</StackPanel> 

</AppBar> 

〈 /Page•BottomAppBar 〉 


前面提到过 Content 和 Click 厲性。 AutomationProperties 类是附加厲性集合，而 Name 
就是其中之一。这些属性通常允许识别用户界血元素，以达到测试 Q 的，也允许辅助技术 
访问，比如屏错阅读器。 AppBarButtonStyle 所定义的 ControlTemplate 引用 
AutomationProperlies.Name M 性，以在按钮卜方显 / j ; •文木7•符串。该特别按钮在暗色主题 
的 M 示效果，如 K 图所示。 



SlandardStyles . xaml 文件还为 I 午多(但非令部 )Segoe UI Symbol 字符编码定义了基于 
AppBarButtonStyle 的 中独 样式，范围从 OxElOO 到 0 xElE 9 。例如，以下是 
HomeAppBarButtonStyle 的 Style 定义： 

<Style x:Key="HomeAppBarButtonStyle M TargetType="ButtonBase" 

BasedOn= H {StaticResource AppBarButtonStyle}"> 

<Setter Property-^AutomationProperties.Automationld" Value="HomeAppBarButton "/ > 

<Setter Property= H AutomationProperties.Name" Value="Home"/> 
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〈Setter Property= H Content" Value-*'&#xE10F; "/> 

</Style> 

显然，这些样式非常方便.因为己经有人匹配好了符号、名称以及建议功能。然而， 
在标准 StandardStyIes . xaml 文件中，这些样式都加了注释，需要删除注释才能使用 。在 XAML 
文件中如何引用该 Style ， 如下所示。 



Click="OnButtonClick" /> 


如果想的话，也可以指定自己的文本。 

<Button Style="{StaticResource HomeAppBarButtonStyle}" 

AutomationProp>erties .Name="Head on Home" 

Click* M OnButtonClick M /> 

如果能用符号和文木标签来获取 StandardStyles - xaml 所定义应用栏按钮样式的完整列 
表，不是很好吗？ LookAtAppBarButtonStyles 程序就提供了这项功能。其 XAML 文件包含 
—个准备填充的 ScroMViewer 和 StackPanel , 以及有两个标准 RadioButton 控件的应 用栏。 

项 FI: LookAtAppBarButtonStyles | 文件： MainPage.xaml ( 片段 } 

<Page ... > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<ScrollViewer FontSize="20"> 

<StackPanel Name="stackPanel" /> 



</Grid> 


<Page.BottomAppBar> 

<AppBar> 

<StackPanel 0rientation= n Hori2ontal ,, > 

<RadioButton Name*"syinbolSortRadio" 

Content="Sort by symbol" 
ChecJced»"OnRadioButtonChecked" /> 



Content- M Sort by text" 
Checked="OnRadioButtonChecked'' /> 



</AppBar> 

</Page.BottomAppBar> 
</Page> 


在 Loaded 事件处理程序中，代码隐藏文件通过引用 b 当前应用实例相关 Resources 集 
合的 MergedDictionaries 厲性， 访问由 StandardStyIes.xaml 提供的 ResourceDictionary 。 代码 
用键名 “ AppBarButtonStyle ” 定位 Style , 并保存所有 Style 实例 ， BasedOn M 忡同时和 class 
的中的 Style 相等， class 是内部类集合。 

项 FI: LookAtAppBarButtonStyles | 文件： MainPage.xaml .cs ( 片 段） 
public sealed partial class MainPage : Page 
( . 
class Item 
{ 

public string Key; 
public char Symbol; 
public string Text; 


List<Item> appbarStyles = new List<Item>(); 

FontFamily segoeSymbolFont = new FontFamily("Segoe UI Symbol"); 
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this.InitializeComponentO ; 
Loaded += OnLoaded; 


void 


sender, RoutedEventArgs args) 


// Basically gets 

ResourceDictionary dictionary 

Style baseStyle = dictionaryl" 


s.xaml 

Application.Current.Resources.MergedDictionaries[0 】； 
Style; 


// Find all styles based on AppBarButtonStyle 
foreach (object key in dictionary.Keys) 

Style style = dictionary[key] as Style; 

if (style != null && style.BasedOn — baseStyle) 

{ 

Item item = new Item 

{ 

Key = key as string 

foreach (Setter setter in style.Setters) 

( 

if (setter.Property.Equals(AutomationProperties.NameProperty)) 
item.Text = setter.Value as string; 

if (setter.Property.Equals(ButtonBase.ContentProperty)) 
item.Symbol = (setter.Value as string)[0]; 

appbarStyles.Add(item); 

) 

} 

// Display items by checking RadioButton 
symbolSortRadio.IsChecked = true; 



Loaded If 件检丧应用中的两个 RadioButton 控件之一，并得出结果。这会调用 
RadioButton 的 Checked 处现程序，并以两种不同方式中的一种排列样式 集合： 

项 | 弓 ： LookAtAppBarButtonStyles | 文件： MainPage.xaml .cs ( 片段 > 
void OnRadioButtonChecked(object sender, RoutedEventArgs args) 

( 

if (sender — symbolSortRadio) 

( 

// Sort by symbol 

appbarStyles.Sort((iteml, item2) *> 

( 

return iteml.Symbol.CompareTo(item2.Symbol); 

))； 

\ 

else 


// Sort by text 

appbarStyles.Sort((iteml, item2)=> 

( 

return iteml.Text.CompareTo(item2.Text); 
))； 


// Close app bar and display the items 





222 


Windows 程序设计 ( 第 6 h 


this.BottomAppBar.IsOpen * false; 
DisplayList(); 


Checked 处理程序会调用 DisplayList , DisplayList 为每一项创建文本。（注意，每一行 
第一个 TextBlock 的 FontFamily 使用 Segoe U 1 Symbol 字体)。每一项都会地加到 ScroIlViewer 
的 StackPanel 中。 


项月 ： LookAtAppBarButtonStyles I 文件： MainPage.> 
void DisplayList() 

{ 

// Clear the StackPanel 
stackPanel.Children.Clear(); 

II Loop through the styles 
foreach (Item item in appbarStyles) 


// A StackPanel for each item 
StackPanel itemPanel - new StackPanel 
{ 

Orientation = Orientation.Horizontal, 
Margin = new Thickness(0, 6, 0, 6) 


// The symbol itself 
TextBlock textBlock = new TextBlock 
{ 

Text = item.Symbol.ToStringO , 
FontFamily = segoeSymbolFont, 

Margin = new Thickness(24, 0, 24, 0) 

)； 

itemPanel.Children.Add(textBlock); 

// The Unicode identifier 
textBlock = new TextBlock 


Text = "Ox" 
Width = 96 


[(int)item.Symbol).ToString("X4" 


itemPanel.Children.Add(textBlock); 

// The text for the button 
textBlock = new TextBlock 
{ 

Text = + item•Text + "X"", 

Width = 240, 

)； 

itemPanel.Children.Add(textBlock); 

// The key name 
textBlock = new TextBlock 


itemPanel.Children.Add(textBlock); 


L.Children.Add(itemPanel); 


列表节选如 F 图 所示。 
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+要受限 丁以 上列表条 tl 。可以在应用栏按钮中使用 Segoe UI Symbol 中的任何字符, 
也町以指定不同字体。 


8.5 深入 Segoe UI Symbol 字体 


Segoe UI Symbol 7 •体还支持字符编码从 0 x 2600 到 0 x 26 FF 的字符， Unicode 标准将这 
些字符分类为 “ 杂项符号”。其中一些字符也适用于应用栏按钮。 

Segoe UI Symbol 字体也超越 f 16位编码范围，包含映射编码 0 xlF 300 到 0 xlF 5 FF 表 
情宇符的图形符号。这些图标字符起源于 H 本，但微软 Windows Phone 和苹果 iPhone 也都 
在使用。 

Segoe UI Symbol 字体还支持常见表情符号，编码范闱从 0 xlF 600 到 0 xlF 64 F , 其中包 
括九个猫表情符号和非礼勿视、非礼勿听以及非礼勿言三只猴子符号。 

Segoe UI Symbol 字体还支持从 0 xlF 680 到 0 xlF 6 C 5 的运输和地图符号。 

为了帮助你(和我)为应用栏选择更多符号，我写了一个叫 SegoeSymbols 的程序， 吋以 
记示 Segoe UI Symbol 字体中编码从 0 到 OxlFFFF 的所有 字符。 

正如你所知道的， Unicode 刚开始的时候采用16位7 符 ，编码范_从 0 x 0000 到 OxFFFF 。 
而到了大于65536个编码点+够用的时候， Unicode 合并了从 0 x 10000 到 OxlOFFFF 的？•-符 
编码，字符数 ® 增加到了 110万以上。经过扩展， Unicode 还包括一套系统，用一对16位 
值来展示更多字符。 

使用笮个32位编码来表示 Unicode 字符,被称为32位 Unicode 转换格式或者 UTF -32。 
但这有点用词不因为 UTF -32 不存在 转换： 32位数宁编码和象形符号之间是一对一的 
映射关系。 

UTF -32 极其罕见，而且大多数人也根本没有把 Unicode 当成32位字符编码，因为在 



事实上， Unicode 的32位部分是附加在16位编码 i : 的。 

与之对应，大多数现代编 程语言 和操作系统都支持 UTF -16 。Windows Runtime 中的 
Char 结构基木 h 是16位整数，这也是 C # 中 char 数据类型的基础。为了表 > j ; •范伴|从 0 x 10000 
到 OxlOFFFF 的吏多字符， UTF -16 使用了两个16位 7 -符序列。这些被称为“代现项” 
( surrogate ), Unicode 留出一个特殊16位编码范围供其使用。主代理项 范围从 0 xD 800 到 
OxDBFF , 而后续代现项范围从 OxDCOO 到 OxDFFF 。 也就是1024个 uj •能的主代理项，1024 
个可能的后续代理项。这样就足够满足从 0 x 10000 到0 X 10 FFFF 的共1 048 576个编码。（稍 
后有实际算法> 

使用拉丁字母的语 R 文木主要限定于 0 x 0020 到和 0 x 007 E 之间的 ASCII 字符编码，因 
此，大多数网页和其他文件都使用 UTF -8 系统存储文本以节约大最空间。 UTF -8 寅接编码 
7位字符，不过对 F 其他 Unicode 字符，会使用一到三位额外字节。 

我写的 SegoeSymbols 项0主要是为了检杳应用栏中 uj 能 的有用符号，所以程序只执行 
到 OxlFFFF 的 7 •符编码。其 XAML 文件包含一个简单标题， 一个 行列等待显示256个宁 • 
符块的 Grid 以及一个 Slider 。 

项 R: SegoeSymbols | 文件： Main Page, xaml ( 片段） 

<Page ... > 

<Page.Resources 〉 

<local : DoubleToStringHexByteConverter x:Key="hexByteConvercer" /> 

</Page.Resources> 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height:"*" /> 

<RowDefinition Height="Auto" /> 

〈 /Grid.RowDefinitions> 

<TextBlock Name="titleText" 

Grid.Row-"0" 

Text="Segoe UI Symbol" 

Horizonta1A1ignment="Center" 

Style="{StaticResource HeaderTextStyle)" /> 

〈Grid Name="characterGrid" 

Grid.Row= M l" 

HorizontalAlignmentwCenter" 

VerticalAlignment="Center" /> 

<Slider Grid.Roy="2" 



Margin="24 0" 

Minimum""。" 

Maximum="511 " 

SmallChange="l" 

La rgeChange="16" 

ThumbToolTipValueConverter="(StaticResource hexByteConverter)" 
ValueChanged= n OnSliderValueChanged" /> 

</Grid> 

</Page> 

注意， Slider 最大值 ( Maximum ) 为 511, 我想显示被 256 除的最大字符 (0 xlFFFF >„ 




Resource 部分引用的 DoubleToStringHexByteConverter 类和以前见过的类似，但它还 M 小/ 
和屏铪视觉效果一致的两条下划线。 

项 SegoeSymbols | 文件： DoubleToStringHexByteConverter. cs () 
public class DoubleToStringHexByteConverter : IValueConverter 
{ 

public object Convert(object value. Type targetType, object parameter, string language) 
return ((int) (double) value) .ToString ( n X2 , ') + " — 


return value; 


毎个 Slider 值对应 M 示一个 16 X 16 数组的 256 个字符。用于构造显示256个字符 Grid 
的代码相当麻烦，因为我认为字符的所有行列之间都应该有分隔线，而这些分隔线在 Grid 
里应该也有各&的行列。 

项 R: SegoeSymbols | 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 

const int CellSize = 36; 

const int LineLength = (CellSize +1) *16+18; 

FontFamily symbolFont = new FontFamily("Segoe UI Symbol"); 

TextBloclc【J txtblkColumnHeads = new TextBlock[16]; 

TextBlock[,] txtblkCharacters * new TextBlock[16, 16 】； 

public MainPage() 

( 

this•InitializeComponent 0; 






); 

Grid. SetRow (rectangle,, row); 

Grid.SetColumn(rectangle, 0); 
Grid.SetColumnSpan(rectangle, 34); 
characterGrid.Children.Add(rectangle) 


% 2 — 1 ) 

: idLengch.Auto; 


if (col = 0 || col 
coldef.Width 
else 

coldef.Width = new GridLength(CellSize); 


characterGrid.ColumnDefinitions.Add(coldef); 

if (col !- 0 “ col % 2 — 0> 

( 

TextBlock txtblk = new TextBlock 


Text - "00" ♦ (col / 2 - 1).ToStringrxi-) + 
HorizontalAlignment = HorizontalAlignment.Center 


»? 

Grid.SetRow(txtblk, 0); 

Grid. SetColumn (txtblk, 
characterGrid.Children 
CxtblkColumnHeads(col / 2 - 1 】 


col); 

.Add (txtblk); 

txtblk; 


if (col % 2 



Grid.SetRow(rectangle, 0); 

Grid.SetColumn(rectangle, col)? 

Grid.SetRowSpan{rectangle, 34); 
characterGrid.Children.Add(rectangle) i 



Text - ((char) (16 * col + row)) .ToStringO, 
FontFamily = symbolFont, 

FontSize - 24, 

HorizontalAlignment « Horizonta 
Vertical Alignment = VerticaIAli_ 


: alAli' 
L ignme ： 


gnrrent .Center, 
nt.Center 
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»; 

Grid.SetRow(txtblk, 2 * row + 2); 
Grid.SetColumn(txtblk, 2 * col + 2); 
characterGrid.Children•Add < txtblk); 
txtblkCharacters[col, row 】 =txtblk; 


Slider 的 ValueChanged 处理程序功能相对容易，把正确文本插入到匕存在的 TextBlock 
元素，但是处理大于 OxFFFF 的字符编码也会有麻烦。 

项目 ： SegoeSymbols I 义件： MainPage.xaml.cs (/i'©) 

void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs args) 

{ 

int baseCode = 256 * (int)args.NewValue; 

for (int col = 0; col < 16; col++) 

txtblkColumnHeadslcolJ.Text = (baseCode / 16 + col).ToString ("X3") + 

for (int row = 0; row < 16; row++> 

{ 

int code = baseCode + 16 * col + row ； 
string strChar = null; 

if (code <= OxOFFFF) 

( 

strChar = (<char)code).ToString0; 

> 

else 

i 

code -= 0x10000; 

int lead = 0xD800 + code / 1024; 

int trail » OxDCOO + code % 1024; 

strChar = ((char)lead).ToString() + (char)trail; 

txtblkCharacters(col, rowj.Text = strChar; 


代码结尾的四行语句表明了数7:运算方法，该方法把 0x10000 和 010FFFF 之间的一个 
Unicode 字符编码分解成两个10位值，以构建主代理项和; T? 续代理项，两者共同组成字符 
串以定义字符。 

如果不想搞明內具体过程， iiJ" 以用以 F 语句取代这 四行： 

strChar = Char.ConvertFromUtf 32 (code); 

如果 code 不大于 OxFFFF. Char.ConvertFromUtD2 就返回由一个字符组成的字符串； 
如果 code 大 T OxFFFF, 则该字符串含有两个字符。向该方法传递代理编码(从 0xD800 到 
OxDFFF) 会报异常。 

构造应用栏按钮最有趣的区域开始 P 0x2600( 杂项符号 区)， 0xE100(Seqoe UI Symbol 
使用的私人使用区)和 OxlHOO (图形文字、表情符号、交通和地图符号)。 F 图是图形文字 
的符屏截图。 



Segoe Ul Symbol 



:面指定了萨克斯管符号。 Visual Studio 有时会发出警告，但程序还是能编译并运行。 
以下应用栏按钮显然是用丁•音乐应用。 


'^* c ' :w 二 .• jXjfyy 1 »** r： '<• -Sib~*. v _ 、 ’*v 、 wT^ 「 


AppBarButtonStyle 

Con ten t= •，& #xlF3B8;" 

AutomationProperties.Name="' 
Click= ,, OnMusicButtonClick M 


<Button Style="{StaticResource 
Content="&#xlF3B9;" 
AutomationProperties.Name= 
Click="OnMusicButtonClick" 


AppBarButtonStyle) 


pl^^- j . " ；,. : vl' ；：.£7；. .''; ;> ' ^J.: 1 : .' V- , •”，二： 


AutomationProperties.Name: 
Click="OnMusicButtonClick" 


卜图是界面。 
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8.6 应用栏 CheckBox 和 RadioButton 


在好多 Windows 8标准应用中，在应用栏里都 h ] ■以看到类似 f CheckBox 或 RadioButton 
的圆形按钮。在日历应用中， H 、 周、月按钮就像一组 RadioButton 控件，而地图应用的 M 
水交通按钮则像 CheckBox 。 

AppBarButtonStyle 包含 ButtonBase 的 TargetType ， 也就是说，" I 以用来设计 CheckBox 
或 RadioButton 样式。然而，在我卷到的 StandardStyles.xaml 版木中 ， AppBarButtonStyle 的 
ControlTemplate 引用了 BackgroundCheckedGlyph , 但模板中并没有定义。如果 CheckBox 
或 RadioButton 使用这些样式时发生错误， t •掉注释引用了 BackgrmmdCheckedGlyph 的 
ObjectAnimationUsingKeyFrames 对象即 ilf 。 

以卜是 我写的 TextFormattingAppBar 代码，页面中心有一个 TextBlock , 应用栏包含三 
个 CheckBox 控件和三个 RadioButton 控件，所有样式都基 ]• AppBarButtonStyleo 


项 FJ: TextFormattingAppBar | 文件： MainPage.xaml < 片段 ) 
<Page ... > 

〈Grid Background="LightGray"> 





<Run>Text Formatting AppBar</Run> 



<Page.BottomAppBar> 

<AppBar> 

<StackPane1 Orientation="Horizonta1"> 

<CheckBox Style="{StaticResource BoldAppBarButtonStyle} 
Checked="OnBoldAppBarCheckBoxChecked" 
Unchecked="OnBoldAppBarCheckBoxChecked" /> 



Checked="OnItalicAppBarCheckBoxChecked" 
Unchecked="OnItalicAppBarCheckBoxChecked" /> 


〈CheckBox Style="(StaticResource UnderUneAppBarButtonStyle)" 
Checked®"OnUnderlineAppBarCheckBoxChecked" 
Unchecked="OnUnderlineAppBarCheckBoxChecked" /> 

〈Polyline Points="0 12, 0 48" 

Stroke="{StaticResource ApplicationForegroundThemeBrush} 
VerticalAlignment="Top" /> 

<RadioButton Name="redRadioButton" 

Style="{StaticResource FontColorAppBarButtonStyle}" 



AutomationProperties.Name="Red" 
Checked="OnFontColorAppBarRadioButtonChecked" /> 

〈RadioButton Style="{StaticResource FontColorAppBarButtonStyle} 
Foreground="Green" 

AutomationProperties.Name="Green" 
Checked="OnFontColorAppBarRadioButtonChecked" /> 


<RadioButton Style="{StaticResource FontColorAppBarButtonStyle} 




AutomationProperties.Name= M BXue M 

Checked= w OnFontColorAppBarRadioButtonChecked M /> 


</StackPanel> 

</AppBar> 

</Page.BottomAppBa r> 

</Page> 

如 K 图所示，如果选中某个按钮，会•成相反颜色反转，但 RadioButton 显示颜色的 
效果没有那么好。 



o © o 


如果想另外设 S 所选 CheckBox 或者 RadioButton 的颜色，吏改 AppBarButtonStyle 即 
可。 

隐藏代码文件和你期望的一样，只不过实现下划线选项的代码格外乩。 

: TextFormattingAppBar | 义科 : ： MainPage.xaml (M'S) 
public sealed partial class MainPage : Page 
{ 

public MainPage() 



void OnBoldAppBarCheckBoxChecked(object sender, RoutedEventArgs args) 

( 

CheckBox chkbox - sender as CheckBox; 

textBlock.FontWeight = (bool)chkbox.IsChecked ? FontWeights.Bold: FontWeights.Normal; 


void OnIta1icAppBarCheckBoxChecked(object sender, RoutedEventArgs args) 

( 

CheckBox chkbox = sender as CheckBox; 

textBlock.FontStyle = (bool)chkbox.IsChecked ? FontStyle.Italic : FontStyle.Normal; 


CheckBox chkbox = sender as CheckBox, 
Inline inline - textBlock.Inlines[0J. 


RoutedEventArgs 
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else if ( ! (bool)chkbox.IsChecked && inline is Underline) 
( 

Underline underline = inline as Underline; 

Run run = underline.Inlines[0] as Run; 
underline.Inlines.Clear(); 



void OnFontColorAppBarRadloButtonChecked(object sender, RoutedEventArgs args) 
{ 

textBlock.Foreground = (sender as RadioButton).Foreground; 


设计 CheckBox 或 RadioButton 样式并不足实现这种功能的唯一方法。 X 气应用阐述了 
模仿 CheckBox 的另一种方法。轻击， Button 的标签 **Change to Celsius ” 会变成 “Change to 
Fahrenheit ’’ 0 

应用栏上的按钮还会沿用 PopupMenu 或者 Popup 。 例如，按卜 ' Windows 8 1 E 浏览器的 
扳手图标按钮，会出现一个小弹窗，里面至少包含两项命令 ： Find on page 和 View on the 
desktop 。 也 " J •以在地图里按 卜地 图样式按钮，会看到 两个瓦 斥选择 Road View 和 Aerial 
View , 其中一个有选中标记，表明是当前选项。还可以在相机应用 ffl 按下相机选项命令， 
会看到一个弹窗，里面有组合框、切换开关和一个 More 链接，展开 后会敁 示一个更大的 
弹出对话框。 

在应用栏中使用 PcjpupMemi 和 Popup , 和通过右键侣用非常类似，只需耍对其智能定 
位即吋，稍后会进行演示。 

应用运行的时候，如果用户手指滑到屏幕右边，就会看到标准 列表： Search , Share 、 
Start 、 Devices 和 Settings 。 第17 $ 会演 4 应用如何接入这些功能。特别值得 _ •提的是 ， Settings 
按钮经常启用选项列表，包括 About 、 Help 以及 Settings 等选项。然而，一些应用会在应 
用栏里包括 Options 项，而应用栏也包含 Settings 项。事实上， StandardStyles . xaml 包含的 
SettingsAppBarButtonStyle 敁示为尚轮图标及中•词 “ Setting ” 。如何在这些项 0 U 中分离 
程序功能取决丁•你，但一般而言，列表访 N 频率比 Settings 尚的项目，应用栏上的 Option 
按钮会用丁•访问频率比 Settings 岛的项 LI , 而 Settings 按钮会用丁-访 M 频率比 Setting 功能 
高的 项目。 


8.7 记事本应用栏 

第7章的 PrimitivePad 程序在界面顶部有 I ■个按钮，分别标记为 Open、Save As . 还有 
一个在 Wrap 和 No Wrap 之间交枰显示的 ToggleButton 。 我们把它们转换为应用栏按钮， 
同时文字换行选项改为 Popup . 并增加按钮，以增加和减小字体大小。但我+想把文件 I/O 
逻辑搞得太复杂。 

以下是 AppBarPad 的 MainPage.xaml 文件。 


项 H: AppBarPad | 文件： MainPage.xaml ( 片段 > 
<Page ... > 



IsEnabled="False" 
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<Button Style="IStaticResource FontlncreaseAppBarButtonStyle)" 
Click= M OnFontIncreaseAppBarButtonClick" /> 

<Button Style= H {StaticResource FontDecreaseAppBarButtonStyle)" 
Click="OnFontDecreaseAppBarButtonClick" /> 

<Button Style= M {StaticResource SettingsAppBarButtonStyle)" 
AutomationProperties.Name="Wrap Option" 
Click="OnWrapOptionAppBarButtonClick" /> 



Orientation: 



〈Button Style="(StaticResource OpenFileAppBarButtonStyle) 
Click= M OnOpenAppBarButtonClick" /> 


<Button Style="(StaticResource SaveAppBarButtonStyle) 


AutomationProperties.Name="Save As" 
Click="OnSaveAsAppBarButtonClick" /> 


</StackPanel> 


</Grid> 


</AppBar> 

</Page.BottomAppBar> 
</Page> 


—般而 R ， 一些按钮放在应用程序栏左边，一些放在心边。手持平板电脑时，这样做 
更方便使用(相较于按钮放在中间)。 XAML 有几种方法把按钮分到左边和心边。也许最简 
中的方法是在单格 Grid 里放 S 两个水平 StackPanel 元素，并保持右对齐和左对齐。 

建议在最厶侧放一个 New (或若 Add ) 按钮，虽然本程序没有 New 按钮，但是与文件相 
关的其他按钮也应该出现在右边， 因为和 New 相关。我提供了一个 Save As 按钮，以取代 
采用 SaveAppBarButtonStyle 样式的 Save 按钮。 

程序选项都在 左边： 增加和减小字体大小按钮，还有另一个（使用通用 
SettingsAppBarButtonStyle ) 用】•文7•换行设诨的按钮。用户手指滑过屏幕顶部或底部时，就 
会看到如 K 图所示的内容。 


Twas brillig. and the slithy toves 
Did gyre and gimble in the wabe: 
All mimsy were the borogoves, 

And the mome raths outgrabe. 



So rested he by the Tumlum tree. 
And stood awhile in thought. 
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程序响应 Application 所定义的 Suspending 事件的时候，会保存用户设置(和 TextBox 
内容)。 Loaded 处理程序会载入这些设置。为方便起见，可以在 MainPage 构造函数中把两 
者定义为匿名方法。以下简笮处理程序用于字体大小增减 按钮： 

项 R : AppBarPad | 文件： MainPage.xaml.cs ( 片段 > 



// Get local settings object 

ApplicationDataContainer appData = ApplicationData.Current.LocalSettings; 


Loaded += async (sender, args)=> 



if (appData.Values.ContainsKey("Textwrapping")) 

txtbox.Textwrapping = (Textwrapping)appData.Values["Textwrapping"]; 


if (appData.Values.ContainsKey("FontSize")) 
txtbox.FontSize = (double)appData.Values("FontSize"J; 



CreationCollisionOption.OpenlfExists); 
txtbox.Text = await FilelO.ReadTextAsync(storageFile); 


II Enable the TextBox and give it input focus 


true; 


c.Focus(FocusState.E 


Application.Current.Suspending += async (sender, args)=> 

{ 

// Save TextBox settings 

appData.Values["TextWrapping"J ■ (int)txtbox.Textwrapping; 
appData.Values 【 "FontSize"] = txtbox.FontSize; 


SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral(); 

await PathlO.WriteTextAsync("ms-appdata : ///local/AppBarPad.txt", txtbox.Text); 



void OnFontlncreaseAppBarButtonClick(object sender, RoutedEventArgs args) 

( 

ChangeFontSize(1.1); 

) 

void OnFontDecreaseAppBarButtonClick(object sender, RoutedEventArgs args) 

{ 

ChangeFontSize(1/1.1); 


void ChangeFontSize(double multiplier) 
( 

txtbox.FontSize *= multiplier; 



中-击 Wrap Options 按钮，程序 会显# 一个包含 Wrap 和 No Wrap 的小对话框。我把对 
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话框的布局定义为名为 WrapOptionsDialog 的 UserControl 。 该 XAML 文件肢■^了 
RadioButton 控件的两个选项。 

项 R: AppBarPad | 文件 ： WrapOptionsDialog .xamiU 片段） 



<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 



<RadioButton Content="Wrap" 


Checked="OnRadioButtonChecked w > 
<RadioButton.Tag> 



</RadioButton.Tag> 
</RadioButton> 

<RadioButton Content="No wrap" 



<RadioButton.Tag> 



</RadioButton.Tag> 
</RadioButton> 



</Grid> 


</UserControl> 

你会发现 Grid 使用了标准背景刷。需要有某种刷子，杏则背景会是透明的。该程序中 
保留了暗色主题，因此，对话框 会有內 色前最和黑色背景，并和 TextBox 形成对比。 

对话框的隐藏代码文件定义了一个 Textwrapping 类型的 TextWrappirfg 从属属性。设 
賈此属性时，厲性更改处理程序会检杳 RadioButton , 如果用户选择 RadioButton , 就设胥 
属性。 

项 R: AppBarPad | 义件： WrapOptionsDialog.xaml .cs ( 片段 } 
public sealed partial class WrapOptionsDialog : UserControl 



TextWrappingProperty = DependencyProperty.Register("Textwrapping", 
typeof(Textwrapping), 
typeof(WrapOptionsDialog) / 

new PropertyMetadata(Textwrapping.NoWrap, OnTextWrappingChanged)); 


public static DependencyProperty TextWrappingProperty { private set; get; } 

public WrapOptionsDialog() 
i 

this.InitializeComponent(); 


public Textwrapping Textwrapping 

( 

set [ SetValue(TextWrappingProperty, value);) 

get { return (Textwrapping)GetValue(TextWrappingProperty);) 


static void OnTextWrappingChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

I 

(obj as WrapOptionsDialog).OnTextWrappingChanged(args); 


void OnTextWrappingChanged(DependencyProperCyChangedEvenCArgs args) 
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RadioButton radioButton « child as RadioButton; 
radioButton.IsChecked = 



void OnRadioButtonChecked(object sender, RoutedEventArgs args) 


this.Textwrapping » (Textwrapping)(sender as RadioButton).Tag; 


Wrap Options 应用栏按钮的事件处理程序在 MainPage 隐藏代码文件中。事件处理程 
序实例化 WrapOptionsDialog 对象，并从 TextBox 的 TextWrapping 属性中初始化 
Textwrapping 属性。 代码再定义两个 TextWrapping 属性之间的绑定。用户吋以育接在 
TextBox 甩看到变化屈性的结果。 WrapOptionsDialog 对象创建为一个新 Popup 对象的子 
对象。 

项 H: AppBarPad I 文件 ： MainPage .xaml.cs ( 片段 > 

void OnWrapOptionsAppBarButtonClick(object sender, RoutedEventArgs args) 

( 

// Create dialog 

WrapOptionsDialog WrapOptionsDialog = new WrapOptionsDialog 



// Bind dialog to TextBox 
Binding binding = new Binding 



Path = new PropertyPath("TextWrapping"), 
Mode = BindingMode.TwoWay 



Popup popup = new Popup 



// Adjust location based on content size 

WrapOptionsDialog.Loaded +- (dialogSender, dialogArgs)=> 



Button 

Point pt = btn.TransformToVisual(null).TransformPoint(new Point(btn.ActualWidth / < 

btn.ActualHeight / 2)J 

popup.HorizontalOffset = pt.X - WrapOptionsDialog.ActualWidth / 2; 
popup.VerticalOffset = this.ActualHeight - WrapOptionsDialog.ActualHeight 
- this.BottomAppBar.ActualHeight - 48; 



一般而言，这种弹窗就定位在应用栏上 idi , 也就是说，需要知道弹窗高度和页曲+高度， 
才能正确显示应用栏高度。我还想水平定位弹窗使其与启 ffl 它的按钮保持对齐。这就需要 
用 TransformToVisual 方法(第10章会进行 W 论)来获取按钮中心相对于屏幕的 坐标。 nJ •以在 
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Popup 子对象的 Loaded 或 SizeChanged 事件中执行此类 计算。 

Click 处理程序把 Popup 的 IsOpen 设 W 属性为 true , 结果如下图所示。 



轻击 Popup 之外的任何地方， Popup 会自动消失，用户需要再拍一次才能关闭应用栏。 
AppBar 和 Popup 执行初始化或消除时，会执行 Opened 和 Closed 事件，因此，可以安装处 
理程序用于 Popup 的 Closed 車件，用来把 AppBar 的 IsOpen 属性设置为 false (例 如)。 

文件1/0逻辑使用简中.的静态 FilelO 方法，但不包含异常处理。 

项目 ： AppBar Pad | 文件： MainPage.xaml .cs ( 片段 } 
public sealed partial class MainPage : Page 





8.8 XamICruncher 入门 

即使熟悉了 Windows Runtime 的各种特性，综合利用这些特性来创建应用仍然是一项 
挑战。 但如果能创建应用栏和对话框.现在就 nJ •以构逑真 iH 像应用的东 W /。 
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XamlCruncher 允许在 TextBox 中输入 XAML 并作#结果。 XamICruncher 所用的神奇 
方法是 XamlReader . Load ， 第2章的 PathMarkupSyntaxCode.project 有过简短介绍 。 XAML 
经过 XamlReader . Load 处理，不能引用事件处理程序和外部组件，但诸如 XamICruncher 
等工具 对丁- XAML 交互体验和学习非常有用。我不会假装把这个程序说成是商业级，但它 
真的利用了 Windows 8的真正特性。 

在以下程序视图中，左侧编辑器甩有一些 XAML 代码，而右侧 M 尔区域是结果对象。 



编辑器没有提供便利功能。输入起始标记时，编辑器也+会自动生成结束 标记； 编辑 
器不使用不同颜色來区分元素、属性和字符串，它一点儿都不智能。不过，吋以改变页而 
配買，具体做法是把编辑窗口放在顶部、右边或底部。 

应用栏里有 Add 、 Open 、 Save 和 Save As 按钮，还有 Refresh 按钮以及应 用设置 按钮。 



可以选择 XamlCrunche 根据每次按键还是仅根据 Refresh 按钮來屯新解析 XAML 。 点 
击 Setting 按钮时所泊用的对话框会显, j ; •吋用选项.如卜图 所小。 













我打开心边 M 示区域的 Rtiler 和 Grid Lines 选项来展小结果。所有这些设胃都被保存卜' 
来，供程序下次运行时使用。 

员如 '的 大部分是一个自定义 UserControl 派生类 SplitContainer 。 中心是一个 Thumb 控 
件，吋以选抒左右两边面板(或者上下 曲板) 的空间比例。在屏輅截图中， Thumb 是一个位 
丁-屏辂中心的浅灰色竖栏。 SplitContainer 的 XAML 文件包括了定义横向和纵向 fidS 的 Grid 。 

项冃： XamlCruncher | 文件： SplitContainer. xaml 
〈UserControl 

x:Class="XamlCruncher.SplitContainer" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/ 2006 /xaml" 
xmlns: local=**using: XamlCruncher "> 


<Grid> 

<!-- Default Orientation is Horizontal --> 

<Grid.ColumnDefinitions 〉 

<ColumnDefinition x:Name="coldef1" Width="*" MinWidth="100" /> 
<ColumnDefinition Width="Auto" /> 
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Grid.Coluran=*'2" /> 

</Grid> 

</UserControl> 

第5章的 OriemableColorScroll 程序 m 有类似标记，横竖屏变化时，界曲宽高比改变， 
Grid Hi 随之改变。 

隐藏代码文件依雜依赖 M 性 (dependency property ) 定义 fi 个属性。通常怙况 >'， Childl 
和 Child 2 属性用 f •设 S 出现在控件 / r : 边和心边的元索，但其实际出现则取决于 Orientation 
和 SwapChildren 属性《 

项 XamlCruncher | 义件： SplitContainer.xami.es ( 片段） 
public sealed partial class SplitContainer : UserControl 
{ 

// Static constructor and properties 
static SplitContainer() 



DependencyProperty.Register("Childl", 

typeof(UIElement), typeof(SplitContainer), 
new PropertyMetadata(null, OnChildChanged)); 



DependencyProperty.Register("Child2", 

typeof(UIElement ), typeof(SplitContainer), 
new PropertyMetadata(null, OnChildChanged)); 


OrientationP^roperty = 

DependencyProperty.Register("Orientation", 

typeof(Orientation), typeof(SplitContainer), 

new PropertyMetadata(Orientation.Horizontal, OnOrientationChanged)); 


SwapChildrenProperty = 

DependencyProperty.Register("SwapChildren", 
typeof(bool), typeof(SplitContainer), 
new PropertyMetadata{false, OnSwapChildrenChanged)); 


MinimumSizeProperty = 

DependencyProperty.Register("MinimumSize", 
typeof(double), typeof(SplitContainer), 
new PropertyMetadata(100.0, OnMinSizeChanged)); 


public static 
public static 
public static 
public static 
public static 


DependencyProperty ChildlProperty { private set; get;) 
DependencyProperty Child2Property { private set; get; J 
DependencyProperty OrientationProperty I private set; get ;) 
DependencyProperty SwapChildrenProperty ( private set; get;) 
DependencyProperty MinimumSizeProperty ( private set; get; } 


// Instance constructor and properties 
public SplitContainer() 

( 

this.InitializeComponent(); 


public UIElement Childl 


set 1 SetValue(ChildlProperty, value); } 

get { return (UIElement) GetValue (ChildlProp>ecty); f 


public UIElement Child2 

( 

set ( SetValue(Child2Property, value);) 

get ( return (UIElement)GetValue(Child2Property); > 
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set { SetValue(OrientationProperty, value );) 

get { return (Orientation)GetValue(OrientationProperty); » 


public bool SwapChildren 

( 

set ( SetValue(SwapChildrenProperty, value );) 
get { return (bool)GetValue(SwapChildrenProperty);) 


public double MinimumSize 

{ 

set ( SetValue(MinimumSizeProperty, value); » 

gee ( return (double)GetValue(MinimumSizeProperty); } 



Orientation 诚性是 Orientation 类切 ， -ft III ] p Stack Panel 和 VariableSizedWrapGrid 的枚 
举一样。应该使用现有类堺的 依赖诚 性，而小是白行发明。注意， MinimumType 是 double 
类哦，因此会初始化为 100.0 而不是100以免运行时类吧不匹紀。 

域性更 改处观 程序砧水了两种小 N " 法.程序 w 川来从静态处理程序调用实例诚件史 
改 ‘1( 件处理程序。我 Li 经展¥了 •种方法，闲同样的 ependencyPropertyChangedEventArgs 
对象，静态处理程序茛接调 W 实例处理程序。有时候，就像 Orientation 、 SwapChildren 和 
MinimumSize M 性的处理程序-拃，静态处理程序为属性类甩赋 JMR 值和新值，闵而调用 
实例处现程序史方便。 

项 XamlCruncher | 义件： SplitContainer.xaml.es ( 片段 > 
public sealed partial class SplitContainer : UserControl 


// Property-changed handlers 

static void OnChildChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

(obj as SplitContainer).OnChildChanged(args); 

} 

void OnChildChanged(DependencyPropertyChangedEventArgs args) 
i 

Grid targetGrid = (args. Property == ChildlProperty A this .SwapChildren》? gridl : grid2; 



if (args.NewValue !* null) 

targetGrid.Children.Add(args.NewValue as UIElement); 


static void OnOrientationChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

{ 

(obj as SplitContainer).OnOrientationChanged((Orientation)args.OldValue, 

(Orientation)args.NewValue); 


void OnOrientationChanged(Orientation oldOrientation. Orientation newOrientation) 

// Shouldn't be necessary, but... 
if (newOrientation == oldOrientation) 
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if (newOrientation = Orientation.Horizontal) 

{ 

coldefl.Width - rowdefl.Height; 
coldef2.Width = rowdef 2 •Height; 

coldefl.MinWidth = this.MinimumSize; 
coldef2.MinWidth = this.MinimumSize; 

rowdefl.Height = new GridLength(1, GridUnitType.Star); 
rowdef2.Height ■ new GridLength(0); 


rowdef1.MinHeight = 0; 
rowdef2.MinHeight = 0; 

thumb.Width = 12; 
thumb.Height * Double.NaN; 

Grid.SetRow(thumb, 0); 
Grid.SetColumn(thumb, 1); 


Grid.SetRow(grid2, 0); 
Grid.SetColumn(grid2, 2); 

» 

else 



fl.Height - coldef1.Width; 
f2.Height = coldef2.Width; 


rowdef1.MinHeight = this.MinimumSize; 
rowdef2.MinHeight = this.MinimumSize; 


coldefl.Width = new GridLength(1, GridUnitType.Star); 
coldef2.Width = new GridLength(0); 


coldef1.MinWidth = 0; 
coldef2.MinWidth = 0; 



Height - 12; 

Width = Double.NaN; 


Grid.SetRow(thumb, 1); 
Grid.SetColumn(thumb, 0); 


Grid.SetRow(grid2, 2 ); 
Grid.SetColumn<grid2, 0); 


atic void OnSwapChiIdrenChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

(obj as SplitContainer).OnSwapChiIdrenChanged((bool)args.OldVali 

(bool)args.NewValue); 


oid OnSwapChiIdrenChanged(bool oldOrientation, bool newOrientati 


gridl.Children.Clear(); 
grid 2 .Children.Clear(); 

gridl.Children.Add(newOrientation ? this.Child2 : this.Childl); 
grid2.Children.Add(newOrientation ? this.Childl : this.Child2); 


void OnMinSizeChanged(DependencyObject obj, 
DependencyPropertyChangedEventi 


args) 
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(double)args.NewValue); 

) 

void OnMinSizeChanged(double oldValue, double newValue) 



rowdef1.MinHeight = newValue; 
rowdef2.MinHeight = newValue; 



Orientation 属性更改处现程序的原始版本假定 Orientation 属性实际会变化，只要属性 
改变，处理程序被调用，就会发生这种情况。但我发现，冇时候把属件值设 腎为现 有值， 
也会调用属件史改处理程序。 

SplitContainer 剩 K 要做的事情是检杳 Thumb 的事件处理程序。这里的想法是基于星星 
规格来分布两列(或两行) Grid , Grid 的大小和长宽比变化时，列(或行)的相对尺、 j •会保持一 
致。然而，为了确保 Thumb 的拖拽逻辑合理简单，如果和星星规格相关的数7•比例是实际 
像系维度，这样做就有效。 OnThumbDragStarted 方法初始化并在 OnDragThumbDelta 改变。 
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前 jfiiXamlCmncher 屏格截图展示了显示区域的标尺和 N 格线。标尺以英寸为申.位，％ 
像桌为1英、因此网格线相距24像素。如果要设计一些矢量图形或者其他精确布局，标 
尺和 M 格线很 有用。 

标尺和 M 格线都独立 可选。 M 示两者的 UserControl 派生类称为 RulerContainer 。 从 K 
面的代码知， 在构建 XamlCruncher 贞面时， RulerContainer 的一个实例被设胥为 
SplitContaine 对象的 Child 2 属性。以下是 RulerContainer 的 XAML 文件。 

项 XamlCruncher | 文件 ： RulerContainer .xaml < 片段） 

<UserControl ... > 

<Grid SizeChanged="OnGridSizeChanged"> 

<Canvas Name= M rulerCanvas" /> 



<Grid Name="gridLinesGrid" /> 

<Border Name="border" /> 

</Grid> 

</Grid> 

</UserControl> 

RulerContainer 控件有 Child 属性，该控件的子控件设黃为 Border 的 Child 属性 。 Border 
视觉效果是由水平线条和垂直线条组成的 M 格，是 Grid 对象的子对象，名为 gridLinesGrid 。 
如果标尺也呈现.名力 innerGrid 的 Grid 的左边界和上边界将被赋 f 非0值，以满足该标 
尺。组成标尺的刻度线标记和数字是 Canvas 的子对象，名为 rulerCanvas 。 

以 K 是隐藏代码文件中所有依赖属性定义的情况。 

项 XamlCruncher | 文件 ： RulerContainer .xaml.cs ( 片段 } 
public sealed partial class RulerContainer : UserControl 



DependencyProperty.Register("Child", 

typeof(UIElement), typeof(RulerContainer), 
new PropertyMetadata(null, OnChildChanged)); 

>wRulerProperty = 

DependencyProperty.Register("ShowRuler", 
typeof(bool), typeof(RulerContainer), 
new PropertyMetadata(false, OnShowRulerChanged)); 



DependencyProperty•Register("ShowGridLines", 
typeof(bool), typeof(RulerContainer), 
new PropertyMetadata(false, OnShowGridLinesChanged)); 


public static DependencyProperty ChildProperty { private set; get; } 
public static DependencyProperty ShowRulerProperty { private set; get; } 
public static DependencyProperty ShowGridLinesProperty { private set; get; } 

public RulerContainer() 



public UIElement Child 





这里也给出了属性更改处理程序(足够简单，町以用丁-静态版本)和 Grid 的 SizeChanged 
处理程序。两个重绘方法处理所有绘画，在两个面板中创建并组织 Line 元素和 TextBlock 
元素： 

项 R: XaralCruncher | 文件 ： RulerContainer .xaml .cs ( 片段 > 
public sealed partial class RulerContainer : UserControl 
( 

const double RULER_WIDTH = 12; 
void RedrawGridLines() 


gridLinesGrid.Children.Clear(); 
if (!this.ShowGridLines > 



(double 








izontal grid lines every 1/4" 

double y * 24; y < gridLinesGrid.ActualHeight 



StrokeThickness = y % 96 = 0 

)； 

gridLinesGrid.Children.Add(line) 















246 


Windows 程序设计(第 6 版> 


// Heavy line underneath the tick marks 
Line topLine ■ new Line 
( 

XI = RULER 一 WIDTH - 1, 

Y1 = RULER:WIDTH - 1, 

X2 = rulerCanvas.ActualWidth, 



rulerCanvas.Children.Add < topLine); 



for (double y = 0; y < gridLinesGrid.ActualHeight - RULER_WIDTH; y ♦= 12) 


// Numbers every inch 
if (y > 0 && y % 96 =« 0) 



Text = (y / 96) .ToString rFO"), 
FontSize ■ RULER_WIDTH - 2 , 


txtblk.Measure (new SizeO ); 

Canvas.SetLeft(txtblk, 2); 

Canvas.SetTop(txtblk, RULER 一 WIDTH + y - txtblk.ActualHeight / 2); 
rulerCanvas.Children.Add < txtblk); 


// Tick marks every 1/8" 



Y1 = RULER 一 WIDTH - 1, 

X2 - RULER_WIDTH - 1, 

Y2 = rulerCanvas.ActualHeight, 



这两种方法广泛使用 Line 元素.在点 （ X 1， Y 1>*( X 2， Y 2> 之间渲染了一条直线。 
RedrawRuler 代码也演示了获取 TextBlock 尺寸的技巧:创建新 TextBlock 时， 
ActualWidth 和 ActualHeight 属性都为0。 TextBlock 成为 ■视树的一部分； Ti , 才会计算这些 
属性，并会随布局而变化。然而， uj •以迫使 TextBlock 调用 Measure 方法来 i | •算其 S 身大 
小。该方法巾 UlElement 定义，也是布局系统的《耍 组成 部分。 

Measure 方法参数是 Size 值，表明供儿素使用的尺寸.但是出丁此 U 的吋以设 W 大小 



为 0: 


txtblk.Measure(new Size 0); 

如果需要找到 TextBlock 大小来进行文木换行，必须为 Size 构造函数的第一个参数提 
供非0值，使 TextBlock 知道换行文本的宽度。 

调用 Measure 后 ， TextBlock 的 ActualWidth 和 ActualHeight 有效，并用于在 Canvas 中 
定位 TextBlock 。只有在 Canvas 中定位 TextBlock 元素的时候， Canvas . SetLeft 和 
Canvas . SetTops 厲性才有必要调用。在单一 Grid 或者 Canvas 中， Line 元素稱丁•來标来定位。 

从下面可以看出， RulerContainer 实例被设置为控制 XamlCruncher 页面的 
SplitContainer 的 Child 2 属性 。 Child 1属性看起来是 TextBox , 但实际上它派生自 TextBox 
的另一个自定义控件 TabbableTextBox 实例。 

标准 TextBox 不响应 Tab 键，但是在编辑器中输入 XAML 时，的确会用到 Tab 键。这 
就是 TabbableTextBox 的主要特性，全部代码如下所示。 

项 XamlCruncher I 文件： TabbableTextBox. cs 

using Windows.System; 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

using Windows.DI.Xaml.Input; 

namespace XamlCruncher 
( 

public class TabbableTextBox : TextBox 
{ 

static TabbableTextBox() 



DependencyProperty.Register("TabSpaces", 
typeof(int), typeof(TabbableTextBox), 
new PropertyMetadata(4)); 








TabbableTextBox 类截获 OnKeyDown 方法以确定用户是否按卜 '了 Tab 键。如果 按下， 
就在 Text 对象中插入空格，光标移动到 TabSpaces 属性粮数倍的-个文木列。此项汁算需 
要知道当前行光标的字符位置。使用类定义中的 GetPositionFromindex 方法，吋以获取该 
信息。 （ TextBox 的 Text 属性的行数受回车和换行限制，但 SelectionStart 指针堆于行尾字符 
进行计算。>此方法是公共方法， XamlCruncher 也用它来显示光标的当前位贾和当前所选内 
容(如果有的 话)。 

另一个 M 性(+依赖于依赖 属性)也由 TabbableTextBox 定义。该属性是 IsModified , 只 
要发牛. KeyDown 事件， IsModified 值就设胃为 true 。 

像许多文木处理程序一柞，如果文本文件自上次保存后发生了改变， XamlCruncher 会 
保持记录。如果用户启动操作来新建文件或者打开现有文件.当前文件就会进入修改状态， 
程序会洵问用户是否要保存文档。 

这种逻辑经常发生在 TextBox 控件 之外。 战入新文件或者保#文件时，程序把 IsModified 
的标志设置为 false ， 在收到 TextChanged 事件 iTi 标志力 true 。 然而， M 过程序设 W TextBox 
的 Text 属性时，会触发 TextChanged 事件， W 此，即使把 TextBox 设置给一个新载入的文 
件，也会触发 TextChanged '} f 件， TextChanged 处理程序会给 IsModified 打 I •.标志。你吋能 
会认为在这种情况下设置 IsModified 标记，通过程序设 K Text 属性，设置一个标记 uj 以避 
免这种情况。然而，设 H Text 属性的方法返回控制给操作系统后，才会调用 TextChanged 
处理程序，而这会导致逻辑混乱。在 TextBox 派生类中实施 IsModified 标记有用。 
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8.9 应用设置和视图模式 

不同程序互相启动的时候，许多应用都会维持用户设 s 和偏好。正如前面提到的， 
Windows Runtime 提供了应用数据存储的独立区域来存储设 S 或者所有文件。 

在本程序中，我将用户设 S 统一到名为 AppSettings 类中。该类实现 
INotifyPropertyChanged , 以用 于数据 绑定。该类基本上是一个视图模式，或者(在较大应用 
中)是视图模式的一部分。 

有一个应该保存的程序选项，即编辑和显示区域的横竖屏。前面说过 ， SplitContainer 
有两个属性， Orientation 和 SwapChildren 。 为了保存用户设 S ， 我要给应用堉加一些更具 
体的东西。 TextBox (或#更确切地说是 TabbableTextBox ) 可以在左边、上边、右 边或荠 底部， 
以卜枚举代码封装了这些选项。 

项目 ： XamlCruncher I 文件： EditOrientation.cs 



AppSettings 显示了组成程序设質的所有属性。构造函数载入并用 Save 方法 保存设 S 。 
所有属性值可通过程序默认设置初始化的字段进行恢复。注意， EditOrientation 属性基丁- 
EditOrienlation 枚举。 

项 XamlCruncher | 义件 ： AppSettings .cs 
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Lyvuuux-* vie 

showGridLines 

















除了 EditOrientatio 之外， AppSettings 还定义了两个额外的属性，能够进一步肓接对应 
SplitContainerOrientation 和 SwapEditAndDisplay 。 set 访问器存为保护状态，并且只有通过 
EditOrientation 的 set 访问器来设置属性。其他应用的设胃没有保存这两个属性，但很容易 
从应用 设胃中 派生出两者，绑定比较容易。 


8.10 XamICruncher 页面 

我们已经写了足够多的代码，现在 UJ 以“组装”成应用了。 MainPage . xaml 文件如 f 
所示。 

项 XamICruncher | 义件： MainPage.xaml ( 片段 > 

<Page ... > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrushJ"> 
<Grid.RowDefinitions> 

<RowDefinition Height-"Auto" /> 

<RowDefinition Height= M * M /> 
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<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width=" 
<ColumnDefinition Width:" 
</Grid.ColumnDefinitions 〉 


<TextBlock 


Name="filenameText" 
Grid.Row= M 0" 

Grid.Column*"0" 
Grid.ColumnSpan="2" 
FontSize="18" 
TextTrimming«"WordE ： 


Orientation="{Binding Orientation 
SwapChildren= M (Binding SwapEditAndDisplay}" 
MinimumSize="200" 

Grid.Row="l w 
Grid.Column:"0" 

Gr id• Co 1 umn Span="2"> 

<local:SplitContainer.Childl> 

<local : TabbableTextBox x:Name="editBox" 
AcceptsRetum="True M 
FontSize="(Binding FontSize}" 
TabSpaces-"{Binding TabSpaces}" 
TextChanged="OnEditBoxTextChanged" 
SelectionChanged="OnEditBoxSelectionChanged"/> 
〈 /local:SplitContainer.Childl> 


<local:SplitContainer•Child2> 

<local : RulerContainer x:Name="resultContainer" 

ShowRuler="{Binding ShowRuler)" 

ShowGridLines-"{Binding ShowGridLines}" /> 
</loca1:SplitContainer.Child2> 

</local:SplitContainer> 


<TextBlock Name="statusText" 
Text^-OK" 

Grid.Row="2" 
Grid.Column* n 0 M 
Fontsize="18" 

TextWrapping="Wrap" /> 


<TextBlock Name»"lineColText" 
Grid.Row="2" 
Grid.Column= n l M 
FontSize= M 18" /> 


OnRefreshAppBarButtonClick" /> 




{StaticResource SettingsAppBarButtonStyle)" 
OnSettingsAppBarButtonClick" /> 


"Horizontal" HorizontalAlignment=' 
icResource OpenAppBarButtonStyle}" 
lAppBarButtonClick" /> 


{StaticResource SaveLocalAppBarButtonStyle \ 
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Click=' , OnSaveAsAppBarButtonClick M /> 


<Button Style®"(StaticResource SaveAppBarButtonStyle) 
Click="OnSaveAppBarButtonClick" /> 


<Button Style="{StaticResource AddAppBarButtonStyle}• 
Click="OnAddAppBarButtonClick , ' /> 
</StackPanel> 

</Grid> 

</AppBar> 

</Page.BottomAppBar> 

</Page> 


主 Grid 有三行。 

• 载入文件名 (TextBlock 名为 “ filenameText ” ）。 

• SplitContainer 。 

• 底部状态栏。 

状态栏包括两个 TextBlock 元素，分别为 statusText (用来表•可能的 XAML 解析错误) 
和 UneColText ( TabbableTextBox 的行列)。 Grid 进一步拆分成两列，用于状态栏的两个组件。 

SplitContainer 占了大部分页面，你会发现它包含了绑定到 AppSettings 的 Orientation 
和 SwapEditAndDisplay 属性 。 SplitContainer 包含一个 TabbableTextBox ( 绑定到 AppSettings 
的 FontSize 和 TabSpaces 屈性)和 RulerContainer (绑定到 ShowRuler fll ShowGridLines )。 所 
有绑定都强烈暗示要把 MainPage 的 DalaContext 设置为 AppSettings 实例。 

XAML 文件末尾定义的是应用栏中的 Buttono 

和期槊的-样，隐藏代码文件在项 tlE 是最长的文件。但我会分成多个模块进行 i 、 t 论， 
让读者不至于感觉太累。以下是构造函数、 Loaded 处理程序和一些简单方法。 


项 

publi 


<amlCr 
: seal 


文件： MainPage.xaml.es ( 片 段） 
ed partial class MainPage : Page 


AppSettings appSettings; 
StorageFile loadedStorageFile; 


public MainPage() 

{ 

this.InitializeComponent(); 


// Why aren't these set in the generated C* files? 
editBox = SplitContainer.Childl as TabbableTextBox; 
resultContainer = SplitContainer.Child2 as RulerContainer; 


// Set a fixed-pitch font for the TextBox 
Language language = 

new Language(Windows.Globalization.Language.CurrentInputLanguageTag); 

LanguageFontGroup languageFontGroup = new LanguageFontGroup(language.LanguageTag); 

LanguageFont languageFont = languageFontGroup.FixedWidthTextFont; 
editBox.FontFamily = new FontFamily(languageFont.FontFamily); 

Loaded += OnLoaded; 

Application.Current.Suspending += OnApplicationSuspending; 

) 

async void OnLoaded(object sender, RoutedEventArgs args) 

:. 

// Load AppSettings and sec to DataContext 
appSettings = new AppSettings(); 
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// Load any file that may have been saved 

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 

StorageFile storageFile = await localFolder.CreateFileAsync("XamlCruncher.xaml M f 
CreationCollisionOption.OpenlfExists); 

editBox.Text = await FilelO.ReadTextAsync(storageFile); 




构造函数首先修复一些涉及 editBox 字段和 resultContainer 字段的错误。 XAML 解析程 
序在编译时会创建这些字段，但在运行时， InitializeComponent 调用不进行设定。 
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构造函数的剩余代码基于 LanguageFontGroup 类所提供的预定义字体，为 
TabbableTextBox 设置固定间距字体。这显然是从 Windows Runtime 获得实际字体系列的唯 
一方法。（第15章将演示如何使用 DirectWrite 获得在系统 t 安装的字体集合)。 

剩卜的初始化发生在 Loaded 事件处理程序中。页面的 DataContext 设置为 AppSettings 
实例，可从 MainPage . xaml 文件中的数据绑定部分预计到这些。 

OnLoaded 方法继续载入以前保存的文件或者(如果+存在的话) TabbableTextBox 中的 
—段默认 XAML , 并调用 ParseText 进行解析。（稍后会说明具体过程 。 )TabbableTextBox 
赋 f 键盘输入焦点， OnLoaded 显示初始行列，只要 TextBox 选杼发生变化，这些行列就会 
随之更新。 

你吋能想知道为什么把 SetDefaultXamlFile 定义为 async (异 步) 并且在不包含任何异步 
代码时返回 Task 。 稍后你会发现，此方法是作为文件1/0逻辑中另一种方法的参数.必须 
得这么定义。闵为不包含任何 await 逻辑，所以编译器会生成一条警告消息。 

8.11 解析 XAML 

XamlCruncher 的主要功能是将一段 XAML 传递给 XamlReader . Load 并获取对象。 
AppSettings 类的 AutoParsing 属性允许每个按键都有此功能或按压应用栏中的刷新按钮， 
程序才会执行。 

如果 XamIReader . Load 遇到错误，会报异常，程序会在页面底部状态栏用红色 M 示错 
误，同时也把 TabbableTextBox 中的文本标记为红色。 

项 H: XamlCruncher | 义 • 件： MainPage.xaml.cs ( 片段） 

public sealed partial class MainPage : Page 



textBlockBrush - Resources["ApplicationForegroundThemeBrush"] as SolidColorBrush; 
textBoxBrush = Resources["TextBoxForegroundThemeBrush"J as SolidColorBrush; 
errorBrush = new SolidColorBrush(Colors.Red); 


void OnRefreshAppBarButtonClick(object sender, RouteciEventArgs args) 
I 

ParseText(); 

this.BottomAppBar.IsOpen - false; 



void ParseText() 

{ 

object result = null; 



statusText.Foreground = statusBrush; 
editBox.Foreground = editBrush; 

) 

) 

一段 XAML 有•能成功通过 XamIReaderr.Load 而没有报错，但随 P 就出现异常。特别 
是涉及到 XAML 动画的时候坷能就会发生这种情况，因为要先加载可视树，才能使动 M 
启动。 

唯一真正的解决方案是为 Application 对象所定义的 UnhandledException 事件安装处理 
程序，而这由 Loaded 处理程序來完成。 

项 H : XamlCruncher | 文件： MainPage.xaml.cs 《片段） 

async void OnLoaded(object sender, RoutedEventArgs args) 

( 

Application.Current.UnhandledException (excSender, excArgs)=> 

( 

SetErrorText(excArgs.Message); 
excArgs.Handled = true; 


类似这种问题是要确保程序+会包含其他类型的未处理异常，而这些异常不是由+确 
定代码所引起的。 
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另外， Visual Studio 用调试器运行程序时，会找到并报告未处理异常。使用 Debug (调 
试)菜单里的 Exceptions (异常)对话框，表明要 Visual Studio 拦截哪呰异常，哪些留给程序。 


8.12 XAML 文件的输入和输出 


不管什么时候处理涉及载入和保存文档的代码，我总是想得容易。有一个基本 问题： 
每次新建或者打开文档，都 ’ rT 要检杏当前文档是否修改而没有保存。如果是，就显示消息 
框，洵问用户是否希望保存文件。选项包括 Save (保存)、 Don't Save (不保存)和 Cancel (取消>。 

简申回 答是 Cancel , 此时程序不需要更多功能。如果用户选抻 Don’t Save , 程序就抛 
弃当前文档，然耵执行新建或者打开命令。 

如果用户选择 Save , 则需要以其文件名保存现有文档。但如果文档不是从磁盘加载或 
者之前未保存过，可能会不存在文件名。如果是这种情况，则需要显示 Save As (另#为)对 
话框。但用户也可以从对话框中选择 Cancel , 新建和打开操作就会终止。否则，当前文件 
会首次保存。 

我们先看看保存文档方法。应用有 Save 和 Save As 按钮，但如果文档没有文件名，则 
Save 按钮需要启用 Save As 对话框。 
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async Task SaveXamlToFile(StorageFile storageFile) 

( 

loadedStorageFile = storageFile; 
string exception = null; 



await FilelO.WriteTextAsync(storageFile, editBox.Text); 

) 

catch (Exception exc) 

exception = exc.Message; 



string message = String.Format("Could not save file (0) : {1)"/ 



对于 Save 按钮，处理程序会禁用此按钮，保存完成后再启用。我担心保存文件时可能 
会重复按 Save 按钮，而且如果第一次保存未究成，甚至会引起重入性 问题。 

M / Tf —个方法中， FilelO . WriteTextAsync 调用是在一个 try 块中。如果保存文件时发生 
异常，程序就耍使用 MessageDialog 通知用户。但 catch 块小能调用 Show Async 之类的枯 
步方法，因此直接保存异常，供以后检查用。 

对丁 • Add 和 Open 按钮， XamICruncher 都需要检査文件是否己修改。如果己修改，就 
必须显 示消息框来通知用户，并要求进一步指示。这发生在 ChecklfOkToTrashFile 方法中。 
由于此方法同时适用于 Add 和 Open 按钮，我给这个方法赋 f •一个 F unc < T as k >类型参数 
commandAction ,即返回 Task 的不带参数方法的代理。 Click 处理程序通过调用 
LoadFileFromOpenPicker 方法来处理 Open 按钮，而 Add 按钮处现程序采用的则是之前提到 
的 SetDefau ltXamlFi le » 

项 R: XamlCruncher | 文件： MainPage.xaml .cs ( 片段） 

async void OnAddAppBarButtonClick(object sender, RoutedEventArgs args) 

{ 

Button button » sender as Button; 
button.IsEnabled = false; 

await ChecklfOkToTrashFile(SetDefaultXamlFile); 
button.IsEnabled = true; 
this.BotcomAppBar.IsOpen = false; 

) 

async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args) 



button.IsEnabled = false; 

await ChecklfOkToTrashFile(LoadFileFromOpenPicker); 


on. I sEnabled =■ true 
.BottomAppBar.IsOpei 













await msgdlg.ShowAsync(); 


editBox.IsModified = false; 
loadedStorageFile = storageFile; 
filenameText.Text = loadedStorageFile.Path; 


8.13 设置对话框 

用户点击 Settings (设按钮，处理程序实例化 UserControl 派牛•类 SettingsDialog 并使 
其成为 Popup 子类。这些选项包含横竖屏 显示。 前面说过，我为四种可能性定义了 
EditOrientation 枚举。因此，木项目还包含一个 EditOrientationRadioButton , 用于把四个值 
的其中之一存储为自定义标记。 

项 FI: XamlCruncher | 文件： EditOrientationRadioButton.cs 
using Windows.UI.Xaml.Controls; 


public 


EditOrientationRadioButton : RadioButton 


public EditOrientation EditorientationTag { set; 


SettingsDialog.xaml 文件在 StackPanel HI 排列所有控件。 

項 H: XamlCruncher | 文件： SettingsDialog.xaml ( 片段） 
<UserControl ... > 


<Style x: Key="DialogCaptionTextStyle , * 

TargetType="TextBlock" 

BasedOn="{StaticResource CaptionTextStyle)"> 

<Setter Property="FontSize" Value="14.67" /> 

<Setter Property="FontWeight" Value- M SemiLight w /> 

<Setter Property="Margin M Value*"7 0 0 0 M /> 

</Style> 

</UserControl.Resources 〉 

<Border Background="{StaticResource ApplicationPageBackgroundTI 
BorderBrush="{StaticResource ApplicationForegroundThemeBr 
BorderThickness="1"> 

〈StackPanel Margin="24"> 

<TextBlock Text="XamlCruncher settings" 

Style="{StaticResource SubheaderTextStyle)" 
Margin="0 0 0 12" /> 


hemeBrush)' 


<! ■- Auto parsing --> 
<ToggleSwitch Header="Aut 
IsOn="{Binding 


parsing" 


<TexCBlock 


"Orientation" 


DialogCaptionTextStyle}" /> 
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〈 Grid.RowDefinitions 〉 
<RowDefinition Heigh' 
<RowDefinition Heigh. 
</Grid.RowDefinitions> 


<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width="Auto" /> 
</Grid.ColumnDefinitions 〉 


<Grid.Resources 〉 

<Style TargetType="Border"> 

<Setter Property= M BorderBrush" 

Value="{StaticResource ^>plicationForegroundThemeBrush}' 
〈Setter Property="BorderThickness" Value="l" /> 


棄轉鼓 ;: ' ’ 卜 : v. J [jT- U h m ] ] H n H 
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</Border> 


感 餐沒 V 缀 ' ' H ^ m *. — •■^^fe '^s^8S^yK^Fr!i SjT? 


Checked="OnOrientationRadioButtonChecked"> 

<StackPanel> 

<Border> 

<TextBlock Text="display" /> 

〈 /Border 〉 




Checked: 

<StackPanel> 

<Border> 


EditOrientationTag="Top" 

"OnOrientationRadioButtonChecked"> 





locals LaicurientationRadioButton> 

Deal :EditOrientationRadioButton Grid.Row="l" 














所有双向绑定都强烈睹示，应该像 Main Page 一样，把 DataContext 设 S 为 AppSettings 
实例。它实际上是 AppSettings 的同一个实例.也就是说，在对话框中任何改动都会自动应 
用到程序。 

也就是说，不能在对话框中做很多改变；17冉点击 Cancel 按钮。 这里 没冇 Cancel 按钮。 
为了弥补这一点，合理的做法是在对话框中放一个恢复所有信息到到出 I ■状态的默认按钮。 

XAML 文件中有相当一部分用于四个 EditOrientationRadioButton 控件。毎一个控件内 
容包含两个冇边界 TextBlock 元袭的 StackPanel , 用来创违类似于之前屏嵇截图的小图形， 
以便组成四个布局选项。 

对话框包舍夂-个 ToggleSwitch 实例。 默认情况下， OnContent 和 OflTontent 属件设筲 
为文本字符串 “ On ” 和 “ Off ” ，但我认为 Show 和 Hide 更有利于标尺 和网格 M 示。 

ToggleSwitch 也有 Header 属性，文本显示在开关上方》标签 “Automatic parsing ” 、 
“ Ruler " 和 “ Gridlines ” 都通过 ToggleSwitch 来显示。我觉得标签看起来很不错,所以用 
DialogCaptionTextStyle 的 Style 来复制字体和位置。 








Slider 用来设 S 字体大小，似乎合理，但我也用 Slider 来设 Stab 键空格数 ffl ， 我承认 
这似乎根本不合理。尽管 AppSettings 类 W 粮数定义 TabSpaces 属性，而绑定 Slider 的 Value 
属性无论如何 I :作，都证明 Slider 是一种改变属性值的简便方法。 

隐藏代码文件的剩余部分用来管理 RadioButton 控件。 

项 R: XamlCruncher | 义件： SettingsDialog.xaml.es 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

namespace XamlCruncher 

( 

public sealed partial class SettingsDialog : UserControl 
t 

public SettingsDialog() 

( 

this.InitializeComponent(); 

Loaded += OnLoaded; 


II Initialize RadioButton for edit orientation 
void OnLoaded(object sender, RoutedEventArgs args) 



if (appSettings != null) 

\ 

foreach (UIElemenC child in orientationRadioButtonGrid.Children) 

\ 

EditorientationRadioButton radioButton = 
child as Editor ientationRadioButton; 
radioButton.IsChecked = 

appSettings.EditOrientation = radioButton.EditorientationTag; 


// Set Editorientation based on checked RadioButton 

void OnOriencationRadioButtonChecked(object sender, RoutedEventArgs args) 

I 

AppSettings appSettings = DataContext as AppSettings; 

EditorientationRadioButton radioButton = sender as Editor ientationRadioButton; 
if (appSettings !■ null) 

appSettings.EditOrientation = radioButton.EdicOrientationTag; 


设胥对话框的!•和 AppBarPad 程序非常相似。 

项 R: XamlCruncher I 义件： MainPage. xaml. cs ( IV©) 
public sealed partial class MainPage : Page 


void OnSettingsAppBarButtonClick(object sender, RoutedEventArgs args) 


SettingsDialog settingsDialog = new SettingsDialog(); 
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settingsDialog.Loaded +« (dialogSender, dialogArgs)=> 

{ 

popup.VerticalOffset - this.ActualHeight - settingsDialog.ActualHeight 
- this.BottomAppBar.ActualHeight - 24; 



popup.Closed += (popupSender, popupArgs)=> 

( 

this.BottomAppBar.IsOpen = false; 

)； 

popup.IsOpen - true; 



Popup 的 Closed 衷件处理程序会关闭应用栏。前面提过. Suspending If 件处理程序会 
保存新设置。 


8.14 超越 Windows Runtime 


前 llli 提到在 XamlCruncher 中输入的时候•对 XMAL 有一些限制。允蒺不能冇 Q 己的 
屯件集，因为洱件需要事件处理程序，而又必须在代码中实施事件处理程序 ， XAML 也不 
能包含引用外部类和 组件。 

然而，经过解析的 XAML 能在 XamlCruncher 过程中运行，也就是说，能访问任何 
XamlCruncher 能访问的类，包括我为程序所创建的0定义类。下图所4的这段 XAML 包括 
为 local 定义的命名空间。这样一来， 就可 以使用 SplitContainer , 并嵌套两个实例。 



: h I mas «tlll in my h«r 

rhinkinj «ll th# tlw, while 

' reading, bet Wf thou(ht« K*d run 

11 > actually to Kjvt 


<Illlp«« » 
/local splltd 


</loc«l ；SplitContaliwri 


本章这段 XAML 代码提供下战，之前的 XAML 屏幕截屏也■以卜 I 
XamlCruncher 迕的 mJ ■以超越 Windows Runtime , 你也能亲自休验定制类，这很何趣。 



























第 9 章动 画 

初看起来，动画主题好像也许更适合于从事游戏或者物理仿真工作的卨级程序员。动 
_似乎并不适用于稳重严肃的商业应用(除了偶然星期五)。 

但是动_在 Windows 8应用中所起的作用，比想象的更 ffi 要。第11章要展示如何使用 
XAML 创建完全重定义控件外观的 ControlTemplate 对象. 从中会体现动画的部分作 ML 尽 
管可视树是 ControlTemplate 最重要的组成部分，但模板还必须表明在一定条件下控件外 
观如何变化。例如， Button (按钮的时候会卨亮 M 示，禁用时会变成灰色。 
ControlTemplate 中所有这些外观变化都定义为动哪怕只是瞬时变化，看起来也不真正 
像动 M 。 

如果要定义不同应用视图之间的过渡或者定义集合变化过程中的条 I 』移动，动幽也能 
发挥作用。试试在开始屏幕卜.把图块从一个磁贴移动到另一个地方，就会看到邻近磁贴也 
会相应移动。这些都是动 W , 也是 Windows 8美学流畅性质的重耍纟 fL 成部分。 

9.1 Windows.UI.Xaml.Media.Animation 命名空间 

第3章演4了如何使用 CompositionTarget . Rendering 箏件使对象变成动 pj , 我把这个 
方法称为“手动” 动画。 尽管手动动画很强大，但也有一些局限。其回调方法总是在用户 
界 Iffi 线程 h 运行，也就是说，动_会千扰程序响应用户输入。 

同时，用 CompositionTarget . Rendering 演示的动 ffli 都是线性的，也就是说，在一段时 
间内，值的増 K : 或减少都是线性的。如果动幽加点变化，往往会吏令人愉悦，通常开始时 
加速，临近结束时减速，或许能再加一点点超现实 写实“ 反弹”。当然 I 也吋以用 
CompositionTarget . Rendering 做这类动 iffij ， 但数学运算会很有挑战性。 

而本章将展示内置的 Windows Runtime 动画工具，包含 
Windows . UI . Xaml . Media . Animation 命名空间 M 的71个类、4个枚举项和2个结构。这些动 
ffli 通常在后台线程上运行，并支持若干复杂效果特性。通常 uj 以完全在 XAML 中定义动 ifflj, 
并用代码或者(在特定但常见的情 况下) 直接从 XAML 触发。 

当然，隼握71个类的动 画工具 令人生畏。幸运的是，这些类可以分为几大类彻，读到 
本章结尾，你应该能完全理解该命名空间。 

动 Wi 涉及到变化，而动 Pi 改变的则是对象属性。该属性通常称为动_“ H 标 ”。 Windows 
Runtime 动_要求依赖项屈性支持标厲性，因此可以用源自 DependencyObject 的类来对 
它进行定义。 

一些图形环境包含棋丁帧的动即动 iWi 步调轴于-视频帧率。不同视频帧速率在不冋 
硬件平台 I •.叫 能产生+同速度的动 W 。 而 Windows Runtime 运行库动画则基于时间，也就 
是说，动_是 堪于时 钟的实际持续 时间： 秒和毫秒。 

如果运行动画的线程需要执行一些任务，而动画停±几秒，会发生什么情况？基于帧 



的动 _ M 常从断点处继续进行。而基丁•时间的 Windows Runtime 动画则堪 r 时钟时间调幣 
到动幽开始的地方。 


9.2 动 iMi 基础 

我们从 TextBlock 的 FontSize 厲性开始广解动就像第3章的 ExpandingText 程序一 
样。 SimpleAnimation 项目有一个两行 Grid . —行是 TextBlock . 还有一行是开始运行动〖田 i 
的 Button (按 钮)。 通常，动画定义在 XAML 文件根 元系的 Resources 部分。该简中.动 Mi 由 
Storyboard 和 DoubleAnimation 组成，如卜•所示： 

项目 ： SimpleAnimation | 文件： MainPage.xaml ( 片段） 

<Page ... > 

<Page•Resources 〉 

<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName= "txtblk•• 


Storyboard.TargetProperty="FontSize" 
EnableDependentAnimation="True" 



</Page.Resources> 


<Grid Background 3 ** (StaticResource ApplicationPageBackgroundThemeBrush)"> 



<RowDefinition Height="*" /> 
<RowDefinition Height-"*" /> 
</Grid.RowDefinitions> 


<TextBlock Name="txtblk" 

Text="Animated Text" 



HorizontalAlignment="Center" 
VerticalAlignment="Center M /> 


<Button Content-"Trigger!" 

Grid.Row="l M 

HorizontalAlignment= M Center" 

Vertica1A1ignment-"Center" 

Click= M OnButtonClick" /> 

</Grid> 

</Page> 

DoubleAnimation 类的名称并+意味着执行两个动 iffli ! 该动 iffli 以 Double 类型属性为 U 
标。正如所看到的 ， Windows Runtime 还支持以 Point 、 Color 和 Object 类型的属性为目标 
的动画。（看起来只需要以 Object 类型的属性为 U 标的动幽，但实际 hPbl 制为设黃离散属性 
值，而不是变为流畅动> 

Windows Runtime 要求类似 DoubleAnimation 的动仰 j 对象是 Storyboard 的子对象。 
Storyboard 以有多个执行并行动_的子对象， Storyboard 的工作则是提供 N 步其子对象的 

框架。 


Storyboard 还定义了两个附加 M 性，名为 TargetName -fll TargetProperty 。 以在动 iWj 对 
象中设 S 这些厲性.表明 U 标对象的名称和所希望动_的对象 属性： 



Storyboard.TargetProperty="FontSize" 

... /> 

</Storyboard> 

默认情况 K , 辅助线程执行动 Pi , 而用户界血线程则仍然可以自由响应用户输入状态。 
然而，以 TextBlock 的 FontSize 属性为 U 标的动画，必须 ll •:用户界面线程运行，因为7-体 
大小的改变会触发布局改变 。 Windows Runtime 不喜欢用用户界®线程运行动 ffl , S 电默 
认小 允许这 么做！耍让 Windows Runtime 知道你的意图(是的，你希槊动 Iffli 运行，即使是采 
用用户界线程)，就必须把 EnableDependentAnimation 属性设 S 为 true ： 

<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName="txtblk" 

Storyboard.TargetProperty» w FontSize M 
EnableDependentAnimation="True" 



此时，“依赖”一词意味着“依赖于用户界面线程”。 

这个特定动 W 的剩余部分是用3秒钟时间的动 iHi 把 FontSizeJS 性值从1变为144。 

<Storyboard x : Key="storyboa rd"> 

<DoubleAnimation Storyboard.TargetName= M txtblk M 
Storyboard.TargetProperty="FontSize" 

EnableDependentAnimation= n True" 

From-"l" To= M 144" Duration="0:0:3" /> 



动 ffli 持续时间以时、分、秒表示。这三项及两个胃号均为必需。如果只指定一个数字, 
则视为小时：如果只指定两个数字，冒号则解释为小时和分钟。秒可以是小数秒。如果耑 
要动副运行一天以 h , 可以在小时数字前写上天数和时期。 

第一次运行木程序时 ， TextBIock M 示为高度48像素(见下图 )， 如 XAML 文件中 
TextBlock 元#所括定的那样。 


Animated Text 



Storyboard 自身并不运行。它需要被触发，通常是在用户界曲发牛.了某些事情之后。 
在本程序中， Button 的 Click 处 PE 程序访问 Resources 集合，获得对 Storyboard 的引用，然 
后调用 Begin = 
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项 SimpleAnimation I 文件： MainPage.xaml.cs 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Media.Animation; 

namespace SimpleAnimation 

( 

public sealed partial class MainPage : Page 
public MainPage() 

this.InitializeComponent 0 ; 


void OnButtonelick(object sender, RoutedEventArgs args) 

{ 

(this.Resources["storyboard"J as Storyboard).Begin(); 


注意其中对 Windows . UI . Xaml . Media 的使用 。 Visual Studio 模板并未自动提供该指令。 
Storyboard 治动后 ， TextBlock 的 FontSize 立即跳到 l(From 值在 DoubleAnimation 中）， 
3秒钟后, FontSize 增加到144。增加过程为线性:第1秒钟时， FontSize 为 48-2/3 像素, 

2秒钟时， FontSize 为 96-1/3 像素，3秒钟之后，动画停止, TextBlock 保持为144像素(见 
下图>。 


Animated Text 


可以再次点击该按钮，动_会冉次开始。事实上，动 W 运行时可以单击按钮复动 Pi , 
每次都从丨像尜大小开始0 


9.3 动画变化欣赏 

SimpleAnimation 程序执行完成动_后， FontSize 保持 DoubleAnimation 的 To 属性所指 
定的值。这是 DoubleAnimation 的 HHBehavior 属性值所产生的结果，默认是枚举项 HoldEnd 。 
可以选择将其设 S 为 Stop 。 

<Storyboard x : Key="storyboard"> 

〈DoubleAnimation Storyboard.TargetName="txtblk , ' 

Storyboard.TargetProperty="FontSize" 
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EnableDependentAnimation="True" 

FillBehavior="Stop" 

From="l" To="144" Duration="0:0:3" /> 



动画结束时，目标属性释放动画， FontSize 恢复到动_前的值48像素。 
另一种变化是省去 From 或 To 的值。 

<Storyboard x : Key="storyboard" > 

<DoubleAnimation Storyboard.TargetName="txtblk" 

Storyboard. Ta rget Property® •’ FontSize" 
EnableDependentAnimation= , 'True" 

From- ,, l" Duration= M 0:0:3" /> 



现在，动 _ 从 1 像袭开始，但只增加到动_前的48像素。而持续时间仍然是3秒钟, 
因此大小增加速度较慢。 

以卜动画导致 FontSize 3 秒钟时间从其当前值增加到144。 

<Storyboard x:Key="storyboard"> 

< Doub 1 eAnimation Storyboard.TargetName="txtblk" 

Storyboard.TargetProperty c "FontSize" 

EnableDependentAnimation="True , ' 

To="144" Duration="0:0:3" /> 



这里所说的 FontSize 从“其当前值”，是因为该值不一定是动_前的值48。甲-击按钮， 
TextBloc 的尺 十仍在 增加的时候，再次申.击该按钮。毎次成功点击，都会有效终止现有动 
imi . 并从当前的 FontSize 开始新动咖。毎一次新的点击都会减慢增加速度，因为动_时长 
仍然是3秒钟。 

你 " J " 能会假定 DoubleAnimation 类把 To 和 From 属性定义为 double 类项。接本确。 
它们实际上是可为空值的 double 类吧，而 null 是默认值。这是 DoubleAnimation 如何确定 
这些 M 性是否己设胃.的方法。 

另一种方法是 By 。 

<Storyboard x:Key="storyboard"> 

〈DoubleAnimation Storyboard.TargetName="txtblk" 

Storyboard.TargetProperty-'TontSize" 

Enab leDependen tAn ima t ion=" True •• 

By="100" Duration="0:0:3 n /> 

</Storyboacd> 

现在，毎次点击按钮就会触发动 Pj , 该动_在3秒钟内， FontSize 会额外增加100像 
素。文本则会越来越大，越来越大。 

试试回到初始设 S ， 添加一个厲性，把 AutoReverse 设 W . 为 true : 

<Storyboard x : Key="storyboard"> 

< DoubleAnimation Storyboard.TargetName="txtblk'' 


Storyboard.TargetProperty="FontSize" 
EnableDependentAnimation="True" 



动画触发后, FontSize 降为1， 3 秒钟后上升到 144, 再过3秒钟，重新跌回到1，动 
画结束。整个动 fli 时长为6秒钟。设置 HUBehavior 为 Stop ， 6秒钟后， FontSize 跳回到动 
画前的值48。 
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也吋以把 RepeatBehavior 属 性设芮 为带或荇不带 AutoReverse 。 如果想要执行增加和减 
少 FontSize 的三个完整周期，则可以像下面这样。 

<Storyboard x : Key="storyboard" > 

<DoubleAnimation Storyboard.TargetName="txtblk'' 

S toryboard.Ta rget Proper t y= •• FontSize" 

EnableDependentAnimation="True" 

From= M l" To="144" Duration-"0:0:3" 

AutoReverse="True" 

RepeatBehavior="3x" /> 



整个动画持续 18 秒钟。 

也■以把 RepeatBehavior 设置为一段时间。 

<Storyboard x : Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName= ,, txtblk'* 
Storyboard.TargetProperty="FontSize" 
EnableDependentAnimation="True M 
From="l" To="144" Duration="0:0:3" 
AutoReverse="True" 
RepeatBehavior="0:0:7.5" /> 



幣个动画持续 7.5 秒钟。 3 秒钟时间， FontSize 从1增加到144,冉过3秒钟，从144 
降低到丨，然后冉次增加并停±。 FontSize 的最终值是73.5。 

也可以像 K 面这样把 RepeatBehavior 设置为 Forever 。 

<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName="txtblk" 

Storyboard.TargetProperty="Fontsize" 

EnableDependentAnimation="True" 

From»"l M To="144" Duration="0:0:3 M 
AutoReverse="True" 

RepeatBehavior="Forever" /> 



代码就是这样精确(除非你看烦了，终止了程序)。 

町以像卜血这样通过 BeginTime 厲性来推迟动画的开始时间。 

<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName-"txtblk" 

Storyboard.TargetProperty="FontSize n 

EnableDependentAnimation="True" 

BeginTime="0:0:1.5" 

From="l" To="144" Duration="0:0:3 M /> 



中-击按钮.开始的 1.5 秒似乎什么都没有发生，然 ; Ti TextBlock 跳辛:丨像索大小，并开 
始增大。点击按钮 4.5 秒钟后，动画结束。 

目前所有这些变化，动幽都是线性。 FontSize 总是毎秒钟线性增加或减少某个特定值。 
有个简申-方法能创建非线性动幽，即设置 DoubleAnimation 所定义的 EasingFunction 厲性。 
把属性值变成属性元素，并指定其为继承自 EasingFunctionBase 的丨丨个类的其中之一。以 
下是 ElasticEase 。 

〈Storyboard x:Key="storyboard" > 

<DoubleAnimation Storyboard.TargetName="txtblk" 

Storyboard.TargetProperty="FontSize" 

EnableDependentAnimation="True" 

From= M l" To="144 M Duration="0:0:3"> 
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<DoubleAnimation.EasingFunction> 

<ElasticEase /> 

</DoubleAnimation.EasingFunction> 

</DoubleAnimation> 

</Storyboard> 

真的需要试试看看效果。 TextBlock 越变越大，实际上超过了 144像素大小，然后减少 
到144以下，反复几次，最终定格在 To 值上。（这种行为真正延伸了“缓动”一词的含 义！〉 
EasingFunctionBase 定义了 EasingMode 属性，所有1丨个派生类都继承该属性。默认设 
置是 枚举项 EasingMode . EaseOut , 即动画一开始是线性，结束时应用特效。可以在动画开 
始时指定 Easeln 应用效果，或者在动画开始和结束的时候指定 EaselnOut 应用效果。 

一些 EasingFunctionBase 衍生类定义了自己的属性用于-些变化。 ElasticEase 定义了 
Oscillations 属性(以整数来表示值来回波动的次数，默认值是 3) 和 Springiness 属性 (double 
类甩，默认也为3)。 Springiness 的值越低，效果越极端。试试以下代码。 


<Storyboard x:Key="storyboard"> 

<DaubleAnimation Storyboard.TargetName="txtblk" 
Storyboard.TargetProperty="FontSize" 


EnableDependentAnima 
Fron^-l，' To="144" Du 



<DoubleAnimation.EasingFunction> 
<ElasticEase Oscillations="10" 


Springiness="0" /> 
</DoubleAnimation.EasingFunction> 
</DoubleAnimation> 

</Storyboard> 


探索缓动函数的程序即将形成。 

前面提到，类似 DoubleAnimation 的动幽'对象必须是 Storyboard 的子对象。有趣的是， 
Storyboard 和 DoubleAnimation 在类辰 级结构中是同层级关系： 


Object 

DependencyObject 



Storyboard 

DoubleAnimation 


Storyboard 定义了 TimelineCollection 类型的 Children 厲性、附加属性 TargetName 和 
TargetProperty » 以及暂停和恢复动画的方法。 DoubleAnimation 定义 From 、 To 、 By 、 
EnableDependentAnimation 和 EasingFunction 。 

目前为 土，所有其他属性 ( AutoReverse 、 BeginTime 、 Duration > FillBehavior 和 
RepeatBehavior ) 都用 Timeline 定义，即 Kf 以在 Storyboard 设背这 _ 属性，以定义 Storyboard 
上所有子对象的行为。 

Timeline 还定义了名为 SpeedRatio 的属性： 


<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName="txtblk" 


Storyboard.TargetProperty*"FontSize" 
EnableDependentAnimation="True" 
SpeedRatio-"10" 



SpeedRatio 设胃使动 _ 运行快 10 倍！当然，也吋以在 DoubleAnimation 设 S SpeedRatio , 
但更常见的做法是在 Storyboard 进行设 S ， 以便应用丁 • Storyboard 中的所有动_子对象。 
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吋以使用 SpeedRatio 来微调动 W 速度，而+改变所 有中个 Duration 次数或调试复杂的动画集 
合。例如，把 SpeedRatio 设置为0.1，以减缓动_,这样可以更好看消楚动幽》 

Timeline 还定义了 Completed 車件， nj ■以在 Storyboard 或者 DoubleAnimation 设置以获 
取动画完成通知。 

也可以完伞用代码定义动 ifli 。 SimpleAnimationCode 项 H 的 XAML 文件有一个 Grid , 
包含共享同一个 Click 事件处理程序的9个 Button 元素。 XAML 文件里没冇 Storyboard , 
也没有 DoubleAnimation ： 


项冃 ： SimpleAnimationCode | 文件： MainPage.xaml ( 片 段 } 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="Button"> 

<Setter Property="Content" Value="Trigger!" /> 

〈Setter Property="FontSize" Value="48" /> 

〈Setter Property="HorizontalAlignment" Value="Center" /> 

<Setter Property="VerticalAlignment" Value»"Center" /> 

<Setter Property="Margin" Value="12" /> 

</Style> 

</Page.Resources 〉 

<Grid Background 3 "(StaticResource ApplicationPageBackgroundThemeBrush)"> 
〈Grid HorizontalAlignment="Center" 



<Grid.RowDefinitions> 


<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 


<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width= w Auto" /> 
<ColumnDefinition Width="Auto" /> 
〈 /Grid.ColumnDefinitions 〉 


<Button Grid.Row= M 0" 
<Button Grid.Row="0" 
<Button Grid.Row="0" 
<Button Grid.Row="l" 
〈Button Grid.Row= M l" 
<Button Grid.Row-"1" 
<Button Grid.Row="2" 
<Button Grid.Row:"2" 
<Button Grid.Row="2" 
</Grid> 

</Grid> 

</Page> 


Grid.Column="0" Click="OnButtonClick*' 
Grid.Column="1" Click="OnButtonClick" 
Grid.Column-"2" Click= H OnButtonClick" 
Grid.Column= H 0" Click="OnButtonClick" 
Grid.Column="l" Click= ,, OnButtonClick M 
Grid.Column= H 2" Click= ,, OnButtonClick" 
Grid.Column="0" Click="OnButtonClick" 
Grid.Column=T Click="OnButtonClick" 
Grid.Column="2" Click="OnButtonClick" 


/> 

/> 

/> 

/> 

/> 

/> 

/> 

/> 

/> 


在代码隐藏文件中，可以-次创建 Storyboard 和 DoubleAnimation ， 而无论何时需要触 
发动_或#根据需要 暇新 创建，都可以进行复用。第一种方法只适用丁•动画 W 标始终是同 
一个对象时。木程序潜在需要9个独立动画用于9个按钮，因此根据需求来创建会比较容 
易。一切都在 Click 处理程序中。 

项月： SimpleAnimationCode | 文件： MainPage.xaral.es(JIS) 
void OnButtonClick(object sender, RoutedEventArgs args) 

DoubleAnimation anima = new DoubleAnimation 


EnableDependentAnimation = true, 

To = 96, 

Duration = new Duration(new TimeSpan(0 # 0, 1)), 
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RepeatBehavior * new RepeatBehavior(3) 

»； 

Storyboard.SetTarget(anima, sender as Button); 

Storyboard.SetTargetProperty(anima, "FontSize"); 

Storyboard storyboard - new Storyboard(); 

storyboard.Children.Add(anima); 

storyboard.Begin(); 

} 

在前血的 DoubleAnimation 的 XAML 定义中，附加属性 Storyboard.TargetName 和 
Storyboard . TargetProperty 表明了动画的对象和属性。代码有一些不同：继续使用静态方法 
Story board.SetTargetProperty 来设置厲性名，但是用 Story board . SetTarget (而 + 是 
Storyboard . SetTargetName ) 来设 W II 标对象，而不是设标对象的 XAML 名称。如果 LI 
标对象是 XAML 文件中.的 TextBlock , 名称为 “ txtblk ” ， SetTarget 调用则如下所示。 

Storyboard.SetTarget(anima, txtblk); 

它是对象的变最名，不是文本名。在代码示例中，0标对象设置为产生 Click 事件的 
Button 。 

还要注意如何设置 Duration 属性。使用 TimeSpan 是最常见方法，但 Duration 也有两 
个静态 属性： Automatic (这里是丨秒)和 Forever (不推荐，因为动 W 会慢得要死)。默认值是 
Automatic , 如果忘了指定会非常方便。 

每个 FontSize 的变化都会影响毎个 Button 的大小(见下图)，因此， Grid 需要珉新计算 
单元格的宽度和高度。马上运行所有动1幽，并观察 Grid 如何改变大小，你会发现很有趣。 


Trigger! 

Trigger! 

Trigger! 

Trigger! 

Trigger! 

Trigger! 

Trigger! Trigger! 

Trigger! 


9.4 双动画 


DoubleAnimation hJ ■以使任何依赖于从属屈性的 double 类型属性形成动 W ， 例如 Width 
或 Height (或两者)。 

项月 ： Ell ipse BlobAnimat ion | 文件 ： Ma inPage. xaml 
<Page ... > 


<Page.Resources 〉 

<Storyboard x:Key*"storyboard" 

RepeatBehavior="Forever" 




AutoReverse="True"> 
<DoubleAnimation Storyboard. 


Cion Storyboard.TargetName="ellipse" 
Storyboard.TargetProperty="Width" 
EnableDependentAnimation="True" 
From="100" To="600" Duration= M 0:0:1' 


<DoubleAnlmation Storyboard.TargetName="ellipse , 
Storyboard.TargeCProperty="Height" 
EnableDependentAnimation="True'' 
From="600 , * To="100" Duration="0:0:1 

</Storyboard> 

</Page.Resources 〉 


ound="{StaticResource ApplicationPageBackgroundThemeBrush)" 
Name="ellipse"> 


〈Ellipse Name="ellipse"> 
<Ellipse.Fill> 

<LinearGradientBrush> 

<GradientStop Offset="0" 
<GradientStop Offset 3 "!" 
</LinearGradientBrush> 
〈 /Ellipse.Fill> 


="Pink M /> 
= M LightBlue M 


</Page> 


两个动 _ 并行运行。第一个动 IWI 把 Ellipse 的 Width 从100 到坩加 600,而第二个则把 
Ellipse 的 Height 从600到减少100。两维只是中间短暂相遇，并构成一个圆 。 AutoReverse 
和 RepeatBehavior 可以在 Storyboard h (如我所做)，也 nj •以在中 个动！ BjM 进行设霄。 

页面加载时，触发动 il « i . 以 forever 方式 运行： 


项 H: EllipseBlobAnimation | 文件： MainPage. ^ 
public sealed partial class MainPage : Page 
{ 

public MainPage() 


L.cs ( 片段） 


>.Resources["storyboard"] 


Storyboard)•Begin O; 


为 Ellipse 着色的 LinearGradientBrush 从矩形边框的左 h 角到右下角默认渐变，闵此， 
在动_播放期渐变实呩是会移动的。 




Width 和 Height 并不是唯一能做动 _ 效果的 Ellipse 属性。 Shape 所定义的 
StrokeThickness ⑽性也是 double 类喂，而且有从属厲性支持。如 Frfri 的 Ellipse ， 边羿有虛 
线 Ifl 绕，动_以成线的 thickness 为 H 标。 


项 H: AnimateStrokeThickness | 文件： MainPage. xaml (IVS) 
<Page ... > 

<Page.Resources 〉 

〈Storyboard x:Key="storyboard "〉 


<DoubleAnimation Storyboard.TargetName="ellipse" 

Storyboard.TargetPrope rty="StrokeThickness" 


EnableDependentAnimation a "True" 
From="l" To="100" Duration:"。：C 


AutoReverse= 


RepeatBehavior= M Forever" /> 

</Storyboard> 

</Page.Resources 〉 



〈Ellipse Name="ellipse" 



StrokeDashCap="Round" 
StrokeDashArray= w O 2" /> 



</Page> 


Loaded 事件中触发动 ilfli , 代码~之前程序相同。 

StrokeDashArray 的 “0 2” 值表明虚线 il ] 0中-位长的破折号，后面跟着2中-位长的空白， 
而甲-位表明 StrokeThickness 的倍数。 rll 于 StrokeDashC'ap 属性，破折号的值四舍 fi 入.而 
四舍五入的值增加到破折号，因此破折号实际上变成了直径和 StrokeThickness 相等的点。 
这些点的中心被一个长度等 P 两倍于 StrokeThickness 的空白所分割。 

在动_中，点的数 歌实际 随着动 Wi 里 StrokeThickness 的增加和减少而减少 和坍加 。点 
好像是在 Ellipse 的圾右边消失和重现(见下图)。 


你能找到另一个 double 类喂的 Ellipse 属性吗？ StrokeDashOflset 是+是？ 
StrokeDashOffset 表明在一条虚 线里破 折号和虚线构成的空门的起点。以下 XAML 语句通 
过一条 W 寒尔曲线 Path 用虚线来画一个无穷大符号。动画以 StrokeDashOITset 为 U 标，而 
点看上去像是环绕着符号。 

项 R: AnimateDashOffset | 义件 ： Main Page, xaml ( 片段） 

<Page ... > 

<Page.Resources> 

<Storyboard x:Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName="path" 




不幸的是，小能在打印纸上展示点环游无分大符号(见下图)。 



程序中的 Path 定义包含一条著名的 W 塞尔曲线，近似四分之一圆。圆心在点(0, 0>， 
右 F 四分之一圆弧起始于 (100, 0), 结束于 (0, 100)。这很近似于贝塞尔曲线,也从 (100, 
0) 开始，在(0, 100) 结束，外加两个控点(100, 55) 和(55, 100)。可以用4个这 样的“ 贝廉 
尔55” 弧线_出一个完整的圆。 

因此，从左上角开始 W 无穷大符号的四分之一圆弧起始于 ( loo , 0 ), 结束于 ( 0 , 100 ), 
+过圆心在 (100,100), 而不是 (0,0). 所以，第一个控点离 (100, 0) 左边有55中.位，第 '个 
控点在 (100, 0) 之上55单位,即 (45, 0) 和 (0, 45)。接下来的贝塞尔曲线应该绕着左下角继 
续幽，从 (0, 100) 开始(也就是上一条 W 塞尔曲线的结束位 S ) 在 (100, 200) 结束，控点为 (0, 
155>和 (45. 200)。但剩卜'的几何学标记路径不是用 C , 即“三次 W 寒尔曲线”，而是用 S , 
即“ 平滑 W 寒尔曲线”继续 ffli 。 众所周知，如果有两条相连的贝寒尔曲线，其交点和和两 
个相邻控点是共线(也就是说，在同一条直线上)，则会有一个平滑连接。路径标记语法中 
的 S 符号导致 111 动推倒第一个控点， W 此起始点和先前的控点为共线，同前一个交点一样, 





到起始点的距离一样。因此，基于第一次 W 塞尔 曲线甩 的点(0, 45) 和 (0, 100), 第一个 S 
图像得出第一个控点 (0, 155)。 

_ 一个首 M 相连的虚线时，很有 uJ ■能会在起点处不连续，只 M 示部分虚线。用 
StrokeThickness 为24是实验而得，并不一定是整数。对丁•这个 Windows Phone 版木的程 
序，使用的 StrokeThickness 是23.98。 

如果探索 Shapes 库的其他内容，寻 找可以 成为动 1 _的 double 类咽属性，还会发现 Line 
的 XK YK X 2 HI Y 2 属性。本章后面将演示如何使 Point 类型属性形成动而这些 M 性 
会出现在许多 PathSegment 衍生类中。 

Opacity 属性是一种很常见的动 Hi H 标，用于元素的淡进和淡出。可以从 0( 透明)到 1( 小 
透明) 设置 Opacity 值。 以下 Opacity 动_来自 John Tenniel 动画插图柴郡猫 (Cheshire Cat ), 
原版来自刘易斯 • 卡罗尔的《爱丽丝梦游仙境》（1865)。 


5.xaml ( 只 . 段 } 


<Page.Resources 〉 

<Storyboard x : Key="storyboard"> 

<DoubleAnimation Storyboard.TargetName= M image2" 
Storyboard. TargeCProperty="Opacity'' 
From="0 M To="l" Duration="0:0:2" 
AutoReverse»"True" 

RepeatBehavior="Forever M /> 

</Storyboard> 


</Page.Resources> 


c!— Images 
http://vr 


from Project Gutenberg Book 
/w.gutenberg.org/ebooks/114 
liel' s illustrations for Lev* 


Wonderland"--> 


<Grid Background*"{StaticResource ApplicationPageBackgroundThemeBrush)" 
<Viewbox> 


<Viewbox> 

<Grid> 


Width="640" /> 


<TextBlock 


"Century 


FontSize="2 


"Justify" 


Width:"320" 


HorizontalAlignment="Right" 
VerticalAlignment="Bottom"> 
&#x2003;&#x2003;"All right," said the Cat; and th 
time it vanished quite slowly, beginning with the 
of the tail, and ending with the grin, which 
remained some time after the rest of it had gone. 
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〈 Image.Clip 〉 

<RectangleGeometry Rect= M 320 70 320 240" /> 
</Image.Clip> 



</Viewbox> 

</Grid> 

</Page> 


正如 XAML 文件中的注释，我从 古饮堺 ( Gutenberg ) 项 HI 获得了阁片。在说版《爱纹梦 
游仙境》中，这两张图片均为奴曲宽度，但为了敁禾爱 ㈣ 蜱是站办:树上的，第-张图片的 
高度还要扩展到页面高度。然而，古技堡项中的图并没有同样宽。第一张 & l ( ali Ce 23 a.giO 
是 342 x 480 像素，第：张 ( alice 24 a . gif ) 是 640 x 435 像素 。我 强制用相同宽度渲染图片，所以 
两张阁片看起来是两种绝对+同的 Mi 法。我还是决定用一个矩形剪切区域限制第：张图， 
只 M 示要消失的猫。此处添加的文字和原版中的小 一样。 



派來白 Transform 的类开始动 _ 时 ， DoubleAnimation 的效果会愈加 明砧。 这是卜 ’-章 
的主题(第10章)。你吋能记得第3章中的 RainbowEight 程序，该程序依次使15个 
GradientStop 对象的 Offset 属性成为动 ffli 。 吋以使用15个 DoubleAnimation 对象编写类似 
程序，但卜一章将展 / j ; •如 何使用 DoubleAnimation 来 编写炎 似程序 ， DoubleAnimation 使设 
S/li TranslateTransform 上的 LinearGradientBrush 成为动画。 


9.5 附加属性动画 

卜一章要探 w 的转换有一种简申 .的用 法涉及 在屏鉻 上移动对象。需要为此应用转 
换。 wj 以把对象放在 Canvas I •.并使 Canvas . Lef 和 Canvas . Top 附加属性成为 动阃。 附加 M 
件动画沿要 Storyboard . TargetProperty 的特殊语法，如卜‘所示。 

项目 ： AttachedPropertyAnimation I 义件： MainPage.xaml 《片段） 

<Page ... > 

<Page.Resources 〉 

<Storyboard x:Key»"storyboard n > 

〈DoubleAnimation Storyboard.TargetName-"ellipse" 






RepeatBehavior="Forever" /> 

<DoubleAnimation Storyboard.TargetName="ellipse" 

Storyboard.TargetProperty="(Canvas.Top) 



AutoReverse="True" 
RepeatBehavior="Forever" /> 


</Storyboard> 

</Page.Resources> 


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush }’'〉 
〈Canvas SizeChanged="OnCanvasSizeChanged" 

Margin="0 0 48 48"> 

〈Ellipse Name="ellipse" 



</Canvas> 

</Grid> 

</Page> 

Canvas . Left 和 Canvas . Top 附加属性就在圆括 号里。 H 标是一个红色 Ellipse , 这 很容易 
被看成一个球。 

清注意，这中:没有 EnableDependentAnimation 设 :' S 。 这表明这些动幽是发牛.在用户 
界面线程上的。如果+确定是否要使用 EnableDependentAnimation ， 就试试+用。如果动幽 
正常，则没有问题。 

Storyboard 有两个步运行的 DoubleAnimation 子对象。注意，每个 DoubleAnimation 
定义把 AutoReverse 设背为 True , 把 RepeatBehavior 设 H 为 Forever , Duration 的值分别设 
背为 1.01 秒和 2.51 秒。此处选杵了素数 (101 和 251) 以免重复模式。两个动圃包括 From 值, 
但没有 To 值。它包含在代码隐藏文件中。 

项 AttachedPropertyAnimation I 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
{ 

public MainPage O 



Loaded += (sender, args)=> 


(this.Resources["storyboard"1 as Storyboard).Begin(); 

}? 


void OnCanvasSizeChanged(object sender. SizeChangedEventArgs args) 
Storyboard storyboard = this.Resources["storyboard"] as Storyboard; 


II Canvas.Left 
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Loaded 事件处理程序启动 Storyboard 。 每当 Canvas 的大小发生变化(发生在窗口大小 
改变的时候)，会根据 Canvas 的高度和宽度计算新的 To 值，而 Canvas 在 XAML 文件中有 
Margin 设置，以补偿 Ellipse 的大小。你卩 J •能会认为不能更改正在进行的动_的值，但这似 
没问题。 动画效果是一个球在屏摧四壁反弹(见下图)。 



两个 DoubleAnimation 定义包括相同的 AutoReverse 和 RepeatBehavior 设置。如前所述， 
这些属性用 Timeline 进行定义， Timeline 也是 Storyboard 的父类。这两项设置吋能成为 
Storyboard 标签吗？试试看。 


<Storyboard 


»y="storyboard" 
erse="True" 
ehavior= n Forever"> 

1 1ion Storyboard.TargetName="ellipse" 
Storyboard.TargetProperty="(Canvas.Left)' 
From="0" Duration= M 0:0:2.51" /> 


<DoubleAnimation Storyboard.TargetName="ellipse" 

Storyboard.TargetProperty="(Canvas.Top)* 
From= M 0" Duration-"0:0:1.01" /> 


完全合法 i 但和前面的标记作用+—样。 Storyboard 的持续时间是其持续时间最长的 
动画子对象，木例中是 2.51 秒钟。动1_开始时，球在水平和垂茛两个方向移动。但在 1.01 
秒钟时，球揸到边缘。横屏模式中为底部边缘。 Canvas . Top 属性的动_匕经完成，但 
Canvas 丄 ett 属性的动 M 继续在另一个 1.5 秒钟里在水平方向移动球，此时球在屏幕右下角。 
然后两个动画部完成，因此， Storyboard 会回退刚刚看到的动画，直到球又出现在左七角。 
此后，动 W 永远重复同样的模式。 

只有 Storyboard 中的所有动_时长都相 N 时， AutoReverse 和 RepeatBehavior M 性才能 
移到 Storyboard h 。 


9.6 缓动函数 


假设 DoubleAnimation 的 From 值是100， To 的值是500, Duration 是5秒钟。默认情 
况 K ， DoubleAnimation 是线性的，即 H 标属性在运行期间基于线性关系值从100到500, 





如下所示。 



或者，以卜公式更 清楚： 


Value = From + T * mC x(To - From ) 
Duration 


该缓动函数的作用是让动画变得更 有趣。 

我原本计划通过展示如何继承 EasingFunctionBase 创建自定义缓动函数来开始讨论. 
但因为我有很好的理由认为不能继承 EasingFunctionBase »如果能继承，就 uj ■以创建你自己 
的缓动函数，只需重写 Ease 方法，并实施转换函数即可。 Ease 方法有 double 类堺参数， 
范围在0到丨之间。该方法返回一个 double 类型值。如果参数是0,方法返回0。如果参 
数为丨，方法返回丨。在0和1之间的值都可以。通过这种方式， easing 函数有效弯曲了时 
间，运行时间和动画值之间的关系从而成为非线性。 

缓动函数生效时，持续时间除以 Duration (如上述公式)，归一到在0和1之间。调用 
Ease 函数，返回值用来计算值. ■ 

… ^ ( Time 、一 _ 、 


Value = From + Ease 


Duration 


x (To — From ) 


例如 ， Exponential Ease 函数，默认 EasingMode 设置为 EaseOut ， 有以下转换函数： 


其中， t 是 Ease 函数的参数 ， t •是结果， N 是 Exponent 属性设置。如果 N 等？ 2( 默认值)， 
上表所尔动画可以替 换为： 



动画开始时较快，然后逐渐慢了 K 來。 

AnimationEaseGrapher 程序以视觉化方式 M 现缓动函数， Hf 以用它来做实验。 

从下图可以看出图形为转换函数，横坐标代表 t 从0到丨，纵平标代表 t •从0到 I , 0 
在顶部，1在底部。从左上角到右下角的虚线是线性转换函数，蓝线是所选抒的转换函数。 





从代码隐藏文件指定的 Polyline h 的点反复调用被选缓动类的 Ease 方法 。按卜 Demo 按钮， 
A :, h 角的小红球水平动 iwi 呈现 Mi 规则线性，垂茛动 isiS ■现的缓动_数，而目.足以令人惊讶 
的是动画遵循图形。 



以 F 是该程序的 XAML 文件，一开始定义红球动_。该动 幽的缓 动函数山代码隐藏文 
件指定。 To 和 From 的值播丁•球的6像袭半径(底部出现 K 降)进行调幣。 

项 H: AnimationEaseGrapher | 文件： MainPage.xaml < 片段） 

<Page ... > 

<Page.Resources 〉 

<Storyboard x:Key="storyboard" 

FillBehavior="Stop"> 

<DoubleAnimation Storyboard.TargetName="redBall" 

Storyboard.TargecProperty="(Canvas.Left)" 

From="-6" To-"994- Duration= M 0:0:3'* /> 

<DoubleAnimation x:Name="anima2" 

Storyboard.TargetName="redBa11" 

Storyboard.TargetProperty="(Canvas.Top)" 

From="-6" To=*"494" Duration- M 0:0:3 M /> 

</Storyboard> 

</Page•Resources 〉 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 

〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Auto" /> 

<ColumnDefinition Width-"*" /> 

</Grid.ColumnDefinitions 〉 

<! — Control panel —> 

<Grid Grid.Column« ,, 0" 

VerticalAlignment="Center"> 

<Grid.RowDefinitions> 

<RowDefinition Height="*" /> 

<RowDefinition Height*"* M /> 

<RowDefinition Height:"*" /> 

</Grid.RowDefinitions> 


rid.ColumnDefinitions> 

<ColumnDefinition Width="AuCo" /> 



<!-- Easing function (populated by code)-- 
<StackPanel NameJeasingFunctionStackPanel •’ 
Grid.Row*"。" 


:ica1A1ignment="Center "〉 
on Content="None" 

Margin*"6" 

Checked="OnE^singFunctionRadioButtonChecked 


</StackPanel> 


<!-- Easing mode —— > 

<StackPanel Name="easingModeStackPanel" 

Grid.Row="0" 

Grid.Column-"1" 

HorizontalAlignment="Center" 

VerticalAlignment="Center"> 

"Ease In" 

Margin="6" 

Checked="OnEasingModeRadioButtonChecked" 
.Tag> 

ingMode> 

</RadioButton.Tag 〉 

</RadioButton> 


<RadioButton 


ent="Ease Out" 

Margin-"6" 

Checked:.. 

<RadioButton.Tag> 

<EasingMode>EaseOut</EasingMode> 
</RadioBuCton.Tag> 

</RadioButton> 


<RadioButton Content»"Ease In/Out" 

Margin="6" 

Checked="OnEasingModeRadioButtonChecked"> 
<RadioButton.Tag> 

<EasingMode>EaseInOut</EasingMode> 
</RadioButton.Tag> 

</RadioButton> 

</StrirIfPanp*l > 



XU.V^UXU1I1U= i 

HorizontalAlignment="Center" 
VerticalAlignment="Center" /> 

<!-- Demo button --> 

〈Button Grid.Row:"2" 

Grid.Column="l" 

Content="Demo!" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

/> 


<!-- Graph using arbitrary coordinates and scaled to window 
〈Viewbox Grid.Column="1"> 
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《Polygon Points="0 0, 1000 0, 1000 500, 0 500" 

Stroke="1StaticResource ApplicationForegroundThemeBrush} 
StrokeThickness="3" /> 



<!-- Points set by code based on easing function --> 
〈Polyline Name="polyline" 

Stroke="Blue" 

StrokeThickness-"3 B /> 

<!— Animated ball --> 

<Ellipse Name="redBall" 



</Grid> 

</Viewbox> 



</Page> 

代码隐藏文件通过镜像来获取继承自 EasingFunctionBase 的所有类，并力每一个类创 
建 RadioButton 元蒺。选中一个时，映像也用于帮助获得类的无参数构造函数。类吋以实例 
化。额外的镜像允许程序获得所有公共属性，而特定 EasingFunctionBase 自身定义了这些 
公共属性。宇-运的是，所有公共属性都限定为 int 或 double 类型，因此，可以为毎一个属 
性创建 Slider 控件。 

项 li: AnimationEaseGrapher | 义件： MainPage.xaml .cs ( 片 段） 
public sealed partial class MainPage : Page 



public MainPage() 


this.InitializeComponent(); 
Loaded += OnMainPageLoaded; 


void OnMainPageLoaded(object sender, RoutedEventArgs args) 

( 

Type baseType = typeof(EasingFunctionBase); 

TypeInfo baseTypelnfo = baseType.GetTypelnfo(); 
Assembly assembly = baseTypelnfo.Assembly; 

// Enumerate through all Windows Runtime types 
foreach (Type type in assembly.ExportedTypes) 


TypeInfo typelnfo = type.GetTypelnfo(); 


// Create RadioButton for each easing function 
if (typelnfo.IsPublic && 

baseTypelnfo.IsAssignableFrom(typelnfo) && 
type != baseType) 



Content - type.Name, 
Tag = type. 



dioButton.Checked += OnEasingFunctionRadioButtonChec ked; 
singFunctionStackPane1•Children.Add{radioButton); 


eck the first RadioButton in the StackPanel (the one label 
igFunctionStackPanel.Children 【 0】 as RadioButton).IsChecked 





/ / r xiiu 

foreach 


d pcit cunts Let xeas tuns u£Udux> emu iusi.diii.xcii.t: une e«asmg 

(ConstructorInfo constructorInfo in typelnfo.DeclaredO 


if(constructorlnfo.IsPublic && constructorInfo.GetParameter_. 

( 

=constructorInfo.Invoke(null) as EasingFunct: 


easingFunc 

break; 


foreach (PropertyInfo 


functi 

coperty 


rty in typelnfo.C 
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slider.Value = (double)property.GetValue(easingFunction); 


// Define the Slider event handler right here 
slider.ValueChanged +- (sliderSender, sliderArgs)=> 

{ 

Slider sliderChanging » sliderSender as Slider; 

Propertylnfo propertylnfo = sliderChanging.Tag as Propertylnfo; 

if (property.PropertyType « typeof(int)) 

property.SetValue(easingFunction, (int)sliderArgs.NewValue); 
else 

property.SetValue(easingFunction, (double)sliderArgs.NewValue); 



)s 

propertiesStackPanel.Children.Add(slider); 


// Initialize EasingMode radio buttons 

foreach (UIElement child in easingModeStackPanel.Children) 

RadioButton easingModeRadioButton = child as RadioButton; 
easingModeRadioButton.IsEnabled = easingFunction != null; 

easingModeRadioButton.IsChecked - 
easingFunction != null && 

easingFunction.EasingMode == (EasingMode)easingModeRadioButton.Tag; 



void OnEasingModeRadioButtonChecked(object sender, RoutedEventArgs args) 

RadioButton radioButton = sender as RadioButton; 
easingFunction.EasingMode = (EasingMode)radioButton.Tag; 

DrawNewGraph(); 


void OnDemoButtonClick(object sender, RoutedEventArgs args) 

( 

// Set the selected easing function and start the animation 
Storyboard storyboard = this.Resources["storyboard"] as Storyboard; 
(storyboard.Children[l] as DoubleAnimation) .'EasingFunction = easingFunction 
storyboard.Begin(); 


void DrawNewGraph() 

C 

polyline.Points.Clear(); 

if (easingFunction == null) 

{ 

polyline.Points.Add(new Point(0, 0)); 
polyline.Points.Add(new Point(1000, 500)); 
return; 


for (decimal t = 0; t <= 1 ; t +« 0.01m) 

{ 

double x = (double)(1000 * t); 









这些缓动函数甩有一些 冗余： QuadraticEase , CubicEase , QuarticEase 和 QuinticEase 
部是 PowerEase 类的特殊情况 ，通过 分别设 K PowerM 性为 2,3,4 和 5, 即复制 PowerEase 。 

前 It ! 的 ElasticEase 屏幕截图，表明该特定 Ease 函数返回值在0和丨的范围之外。 
BackEase 也是如此。因为转换函数 能返回 值小于0或大于丨，当其 From 和 To 属件 设背 
俏落在范_以外时.也能呈现动画》 

对丁•许多属性而 H , 这样做都+会有 问题。 但对于某些属性而言，町能会报舁常。例 
如， Opacity 不能设置为小于0或大于丨的值。 Width 和 Height 不能设置为负值 , FontSize 
必须大于0。动画应用这些导致非法值的属性时，会报运行 异常。 

尽管缓动函数通常用各种方法导致动副放慢和加速，但是 可以用 某些非常规方戎使用 
缓动函数 。例 如，如果设腎 EasingMode 为默认值 EaseOut 时， SineEase 有如下转换函数 



这是正弦曲线的第一个四分之一，开始快，然幻慢。对于 Easeln , 如下余弦曲线的第一个 
四分之一，很快从0变成1: 



开始慢，然后快。 

设置 EasingMode 力 EaseOut , SineEase 是余弦曲线的前半部分，从0调整到1 

• l-COS(7C/) 

/ = - 

2 

开始慢，然后变快，再变慢。如果把 SineEase 的 EaselnOut 变最和 DoubleAnimation 应用到 
Ellipse 的 Canvas.Lefl 厲性，并把 AutoReverse 设 S 为 True，RepeatBehavior 设腎为 Forever . 
就会得到类似钟摆的运动，即反向运动时很慢，在中间时较快。 

如果把类似动_应用到 Canvas . Top , 但平移半个周期，则■以绕着圆圈移动对象，如 
以卜程序演示的那样。 

项 H: CircleAnimation | 文件： MainPage.xaml ( 片 段） 

<Page ... > 

<Page.Resources> 

<Storyboard x: Kef storyboard" SpeedRatio=" 3"> 

<DoubleAnimation Storyboard.TargetName="ball" 

Storyboard.TargetProperty="(Canvas.Left)" 

From= ,, -350" To="350" Duration="0:0:2" 



<SineEase EasingMode-"EaselnOut" /> 
</IDoubleAnimation.EasingFunction> 


</DoubleAnimation> 

<DoubleAnimation Storyboard.TargetName:"ball M 

Storyboard.TargetProperty="(Canvas.Top) 
BeginTime="0:0:l" 

From= M -350" To="350" Duration= w 0:0:2" 
AutoReverse»"True" 

RepeatBehavior®"Forever"> 
<DoableAnimation.EasingFunction> 

<SineEase EasingMode= M EaseInOut M /> 
</DoubleAnimation.EasingFunction> 

</DoubleAnimation> 
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</Storyboard> 

</ Page.Resources 〉 

<Grid Background="{StaticResource App1ication PageBackgroundThemeBrush}"> 
<Canvas HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Margin="0 0 48 48"> 

〈Ellipse Name="ball" 



Height="48" 
Fill- M Red" /> 



</Page> 


Canvas 居中对齐，但椭圆会抵消大小，也就是说，相对于 Canvas 而言，点 (0, 0>距窗 
口左24像#、中心以上24像袭的位置。 Ellipse 的 Canvas . Lett 和 Canvas . Top 默认为零， 
位于中心。动 Pj 在上卜和左右350像索之间移动 Ellipse 。 

注意，第：个动画有1秒种的 BeginTime , 因此，加战程序后的最初1秒钟，第一个 
动 l ! ni 水平移动椭圆从 -350 像索到0,然后第.个动晒开始生效，垂直移动球从 -350 到0, 
此时，第一个动画水平移动椭圆从0像素到350。虽然缓动函数旨在减速和加速动但 
Ellipse 在绕圆周游时有恒定角速度。 

F —章将通过 RotateTransform 展示.个吏貞接的方式来实现绕转。 


9.7 完整的 XAML 动画 


+章 W 前演氺的几个程序，都是触发奴 Ifil' Loaded 事件处理程序中的 Storyboard。 如果 
需要程序或页面加载或“演示” 一貞运行的动画，这种方法非常方便。 

实际I•.完全可以在 XAML 取执行在 Loaded 事件里触发动使用名为 Triggers 的传 
统属性 即叫， 该属件继承自 Windows Presentation Foundation(WPF)。 在从 WPF 到 Windows 
Runtime 的漫 K 变迁中， M 然 Triggers 属性几乎 Li 经失去 了以前所有的 功能，但仍然 …•以触 
发 storyboard： 

<Page.Triggers 〉 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard ... > 


</Storyboard 〉 
</BeginStoryboard> 


</Page.Triggers> 


Triggers M 性元桌通常出现在 XAML 文件的根元.素，习惯放在文件底部，但实际上可 
以在任何动幽 U 标的祖先元桌定义 Triggers 厲件儿素。 

注总 EventTrigger 和 BeginStoryboard 。 现在是看到这吗标签的唯一环境 。 EventTrigger 
有 RoutedEvent 厲性，但如果试着将其设置为任意值（包括合理的 “ Loaded ” 或者 
** Page . Loaded "), 就会产生运行时错误。 BeginStoryboard 吋以有多个 Storyboard 子对象。 

以 F 程斤 :类似 P 第3章的 ManualColorAnimationo Grid 的背景和 TextBlock 的前段以 
动画形式 V . 现，从小同方 1(0 从黑到 fl 变化。两个 ColorAnimation 对象的 H 标是两个 




SolidColorBrush 对象的 Color 属性。 

项目 ： ForeverColorAnimation I 文件： MainPage.xaml ( 片段 > 
<Page ... > 



<Grid.Background> 

<SolidColorBrush x:Name="gridBrush" /> 
</Grid•Background 〉 



FontFamily="Times New Roman" 
FontSize= M 96" 

FontWeight="Bold" 
HorizontalAlignment="Center" 
VerticalAlignment="Center"> 
<TextBlock.Foreground 〉 

〈SolidColorBrush x:Name="txtblkBrush" /> 
</TextBlock.Foreground 〉 

</TextBlock> 

</Grid> 


<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard RepeatBehavior="Forever" 
AutoReverse= n True"> 


<ColorAnimation Storyboard.TargetName= M gridBrush M 
Storyboard.TargetProperty= M Color n 
From="Black H To="White" Duration 罵 "0:0:2" 


/> 


<ColorAnimation Storyboard.TargetName="CxtblkBrush" 
Storyboard.TargetProperty= n Color M 


</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
</Page.Triggers> 

</Page> 


ColorAnimation Kf 能是第：个常见的动 _ 类，仅次于 DoubleAnimation 。 它被严格限 
定为以 SolidColorBrush 和 GradientStop 的 Color 属性为 U 标，但这些_刷经常出现，所以 
比看起来有更多功能。注 , S Storyboard ' fi . RepeatBehavior 和 AutoReverse 的设黄。 

代码隐藏文件只包含 Klfij 构造函 数甩的 InitializeComponent 调用。也就是说， oj •以把 
该 XAML 文件复制到第8章 XamlCruncher 程序的编辑器呕，刪除 x : Class 属性，并运行动 
_，而+需要任何代码的帮助。 XamlCruncher (或另一个 XAML 编辑器)是实验动 Pi 的好 
方式。 

还吋 以去掉 Point 类哦的厲性 的动副 效果。 Point 类型的属性并+很常见，但 
EllipseGeometry 有 Point 类把的 Center 属性。如果使用 Path 和 EllipseGeometry 而非 Ellipse 
类创建圆或椭圆，就叫以通过动 Hi Center 属性绕着屏幕移动圆或椭圆。。动幽 Canvas 丄 eft 
和 Canvas . Top 不同， Path 不耑 要在 Canvas 哏，图形位 S 指定为相对•中心.而不是左上角。 

然而.不能中.独使 Point 值的 X 和 Y 属性成为动画，因为 Point 是结构而不是类，也 
就是说，小能继承 DependencyObject , X 和 Y M 性小受依赖属性支 持。 

Point 类甩属性也出 现在些 PathSegment 派生类见， ArcSegment 、 BezierSegment 、 
LineSegment 和 QuadraticBezierSegment 都有 Point 类哳属性。这辟 Point 厲性成为动町 
以动态改变图形。以下程序使用前 [6] '讨论过的 W 寒尔曲线 ihiiIMI , 然后13个点都会成为动 liuj . 
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最后圆变成正方形。这样 H 是为了演示 Triggers 属性元素不需要定义在 XAML 文件的根元 
素，定义在 Path 中 即可。 

项 H: SquaringTheCircle | 文件： MainPage.xaml ( 片段 > 

<Page ... > 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush]"> 

<Canvas HorizontalAlignment="Center" 

VerticalAlignment=**Center"> 

<Path Fill="(StaticResource ApplicationPressedForegroundTheraeBrush}" 

Stroke="(StaticResource ApplicationForegroundThemeBrush)" 
StrokeThickness- M 3 H > 

<Path.Data> 

<PathGeometry> 

<PathFigure x:Name="bezierl" IsClosed="True"> 


<BezierSegraent x 

<BezierSegment x 
<BezierSegment x 
<BezierSegment x 
</PathFigure> 
</PathGeometry> 
</Path.Data> 


: Name="bezier2" /> 

jne="bezier3'' /> 
jne="bezier4" /> 
jne="bezier5" /> 


<Path.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard RepeatBehavior="Forever"> 

<PointAnimation Storyboard.TargetName="bezier1" 

Storyboard.TargetProperty="StartPoint" 
EnableDependentAniraation»"True" 

From="0 200" To="0 250" 
AutoReverse="True" /> 


Storyboard.TargetName="bezier2" 

Storyboard.TargetProperty-"Point1" 
EnableDependentAnimation="True" 

Froro= M 110 200" To="125 125" 
AutoReverse-’’True" /> 

<PointAnimation Storyboard.TargetName="bezier2" 

Storyboard.TargetProperty="Point2" 

EnableDependentAnimation="True" 
From="200 110" To="125 125" 
AutoReverse="True" /> 









<PointAnimation Storyboard.TargetName="bezier4" 

Storyboard.TargetProperty="Point1" 
EnableDependentAnimation="True M 
From="-110 -200" To-"-125 -125" 


AutoReverse="True" /> 


<PointAnimation Storyboard.TargetName="bezier4" 

Storyboard.TargetProperty="Point2 n 
EnableDependentAnimation="True" 

From= M -200 -110" To="-125 -125" 
AutoReverse="True" /> 

<PointAnimation Storyboard.TargetName="bezier4" 

Storyboard.TargetProperty="Point3" 
EnableDependentAnimation="True" 
From="-200 0" To="-250 0” 
AutoReverse="True" /> 

<PoincAnimation Storyboard.TargetName="be2ier5 M 

Storyboard.TargetProperty="Point1" 
EnableDependentAnimation= n True" 
From="-200 110" To="-125 125" 
AutoReverse="True" /> 

<PointAnimation Storyboard.TargetName="bezier5" 

Storyboard.TargetProperty-"Point2" 
EnableDependentAnimation="True" 
From="-110 200" To="-125 125" 
AutoReverse="True" /> 


</Storyboard> 

</BeginStoryboard> 



</Path.Triggers> 

</Path> 

</Canvas> 

</Grid> 

</Page> 


Name=" 

Storyboard.TargetProperty="Point3" 
EnableDependentAnimation» H True" 
From= M 0 200" To="0 250" 
AutoReverse="True w /> 


F 图介于 iH 方形和圆之间。 





Windows 程序设计 ( 第 6 


9.8 自定义类动画 


是的 • 可以把 tJ 定义类属性也变成动 W , 但可成为动 L ®〗 的属性必须受依赖属性支持。 
以 K 类名为 PieSlice , 继承 Path , 用来渲染饼图里的扇形。自定义属性是 Center 、 
Radius、Start Angle (角度，从 12:00的顺时计测最> 和 SweqjAngie (角度，从 Start Angle 的顺 
时针测最)。 


项 H: AnimatedPieSlice I 文件： PieSlice.c 

using System; 

using Windows.Foundation; 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Media; 

using Windows.UI.Xaml.Shapes; 


namespace AnimatedPieSlice 


public class PieSlice : Path 


PathFigure pathFigure; 
LineSegment lineSegment; 
ArcSegmenC arcSegment; 


CenterProperty = DependencyProperty.Register("Center", 
typeof(Point), typeof(PieSlice), 

new PropertyMetadata(new Point(100, 100), OnPropertyChanged)); 


RadiusProperty = DependencyProperty.Register("Radius" 
typeof(double), typeof(PieSlice), 
new PropertyMetadata(100.0, OnPropertyChanged)); 


StartAngleProperty = DependencyProperty.Register("StartAngle", 
typeof(double), typeof(PieSlice ), 
new PropertyMetadata(0.0, OnPropertyChanged)); 


weepAngleProperty = DependencyProperty.Register("SweepAngle", 
typeof(double ), typeof(PieSlice ), 
new PropertyMetadata(90.0, OnPropertyChanged)); 


public PieSlice() 


pathFigure = new PathFigure { IsClosed 
lineSegment = new LineSegment(); 
accSegment 
pathFigure. 




this.Data * , 
UpdateValues 







set { SetValue(CenterProperty, value);) 

get { return (Point)GetValue(CenterProperty); } 


public double Radius 

: 

set { SetValue(RadiusProperty, value); } 

get ( return (double)GetValue(RadiusProperty); J 

public double StartAngle 

{ 

set { SetValue(StartAngleProperty, value); } 

get { return (double)GetValue(StartAngleProperty);) 

» 

public double SweepAngle 

( 

set ( SetValue(SweepAngleProperty, value); } 

get I return (double)GetValue(SweepAngleProperty); > 

) 

static void OnPropertyChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

I 

(obj as PieSlice).UpdateValues(); 



pathFigure.StartPoint - this.Center; 


double x = this. Center .X + this. Radius * Math. Sin (Math. PI * this. StartAngle 
double y = this.Center.Y - this.Radius * Math.Cos (Math.PI * this.StartAngle 


lineSegment.E 




y = this.Center.Y - this.Padius * Math.Cos(Math.PI * (this.StartAngle +this.SweepAngle) /180); 

arcSegment.Point = new Point(x, y); 
arcSegment.IsLargeArc * this.SweepAngle >= 180; 



该类 1 U 的一切都用于依赖属性，除了 UpdateValues 方法(该方法至关重要)。只要四个 
属性里的仟总一个发生变化，就会调用 UpdateValues 。 四个属性里的任总一个都可以是动 
标，也就是说，对 P 无限时间，每秒钟调用60次 UpdateValues 。 

对于调用如此频繁的方法，应该小心创建需要在堆上分配内存的对象。 uj •以创建新的 
double 类吧和 Point 类型的值，因为它们都存储在找甩。但毎次调用都要创建新的 
PathFigure , LineSegment 和 ArcSegment 对象不是好办法，因为会生成大最分配内存及随; T ? 
必须释放的活动。可以试试 ® 用或缓存对象，+要 m 新创建。 

PieSlice 类是 AnimatedPieSlice 项目的一部分，其中包括 MainPage . xaml , 该文件实例 
化和初始化 PieSlice 类，并将其变成动画。 
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: PieSlice x : Name="pieSlice" 
Center*"400 400" 
Radius="200" 
Stroke="Red" 
StrokeThickness=" : 


<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 

<DoubleAnimation 


Storyboard.TargetName="pieSlice" 
Storyboard. Target Property» M SweepAngle** 
EnableDependentAnimation="True" 
From="l" To="359" Duration-"0:0:3" 


From="l" To="359" Duration-"。：。：2 
AutoReverse="True" 
RepeatBehavior»"Forever" /> 
</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers 〉 

</Page> 


结果是下图所示的一张饼图，范围从1度到359度，重复不断。 



9.9 关键帧动画 


到 H 前为止，所有程序都是用动_把属性从一个值变为另一个值，通常通过指定 
DoubleAnimation , ColorAnimation 和 PointAnimation 的 From 和 To 属性来完成，而唯一变 
化涉及到非线性方法，获得从 From 到 To 的动画，然后再从 To 到 From 倒放动画。 

如果需耍用动 W 把属性从一个值变到另一个值，再到第三个值，甚至超越前三个值， 
该怎么办？你想到的解决方案可能会是在 storyboard 1针对相同属件定义一些动_并使用 
BeginTime 延迟其中一些动画，使其不会产生重叠。但这样做是非法的。针对特定诚性， 
storyboard 不能有多个动副。 

iH 确的解决方案是关键帧 (key frame ) 动 Wi , 之所以这么叫，是因为要通过一系列关键 
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帧来定义动画进度。每个关键帧表明在特定运行时间属性的值应该是什么，如何从先前的 
关键帧值变为关键帧的新值$ 

_ F 面所为关键帧动 W 的简笮例子，该动_ 0标是 EllipseGeometry 的 Center 属性，绕 
着屏幕移动圆。 

项 FI: SimpleKeyFrameAnimation I 文件： MainPage.xaml < 片段 } 



<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 
〈Path Fill="Blue"> 

<Path.Data> 

<EllipseGeometry x:Name="ellipse" 



</Path.Data> 

</Path> 

</Grid> 

<Page.Triggers 〉 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 

<PointAnimationUsingKeyFrames Storyboard.TargetName»''ellipse" 

Storyboard.TargetProperty= M Cente r" 
EnableDependentAnimation="True" 

Repea tBeha vior=" For ever’. > 

<DiscretePointKeyFrame KeyTime="0:0:0" Value-"100 100" /> 
<LinearPointKeyFrame KeyTime="0:0:2" Value= M 700 700" /> 
<LinearPointKeyFrame KeyTime*"0:0:2.1" Value» H 700 100" /> 
<LinearPointKeyFrame KeyTime="0:0:4.1" Value="100 700" /> 
<LinearPointKeyFrame KeyTime="0:0:4.2" Value-"100 100" /> 
</PointAnimationUsingKeyFrames> 

</Storyboard 〉 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers 〉 

</Page> 

Storyboard 包含 PointAnimationUsingKeyFrames ，没有 PointAnimation 。 
PointAnimationUsingKeyFrames 包含 DiscretePointKeyFrame 和 LinearPointKeyFrame 类期的 
子对象，而没有在 PointAnimation 指定 From 、 To 和 Duration 属性。 

集合中的毎个关键帧指定了从动画开始后的特定时间你想要的目标属性值。关键帧集 
合通常从 KeyTime 为0的 Discrete 条目开始，基本 h 是把该属性初始化为该值。 



集合中的下一个关键帧如下： 

<LinearPointKeyF_rame KeyTime="0:0:2" Value="700 700" /> 

也就是说， H 标属性在2秒钟从先前的(100, 100) 线性增加到 (700, 700)。在两秒钟时, 
值为 (700, 700). 

卜' 一个关键帧指定运行史快动1_: 



从2秒到2」秒，点从(700，700>变到 (700, 100>。接下来的2秒，动 W 又变 慢: 

<LinearPointKeyFrame KeyTime="0: 0:4 .I" Value="100 700" /> 


设后一个关键帧如 K : 
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<LinearPointKeyFrame KeyTime- M 0:0:4.2" Value-"100 100" /> 

运行完 4.2 秒，目标属性的值是 (100， 100)，动画结束。此时，动画可以倒放(如果 
AutoReverse 为 true ) 或从头再幵始(如果 RepeatBehavior 值设置适当)。 

程序员有可能对关键帧想得过多，而以下两条规则超级简单，可以防止混乱。 

• 关键帧总是表明在运行时刻所期望的属性值。 

• 动画的持续时间是集合里最大的关键时间。 

X / f 存储 关键帧集合 ， PointAnimationUsingKeyFrames 类定义 PointKeyFrameCoIlection 
类型的 KeyFrames 属性 ， PoimKeyFrameCollection 是 PointKeyFrame 对象的集合。 
PointKeyFrame 定义 KeyTime 和 Value 属性。四个类都继承自 PointKeyFrame ， 前面己经讨 
论过其中两个。 

• DiscretePointKeyFrame 跳 转到特定值。 

• LinearPointKeyFrame 执行线性动 iSi 。 

• SplinePointKeyFrame 可以加速或减速。 

• EasingPointKeyFrame 用缓动函数进行动 W 。 

同样 ， Windows Runtime 包含 DoubleAnimationUsingKeyFrames 类，该类有 
DoubleKeyFrame 子类型，和包含 ColorKeyFrame 类型子对象的 
ColorAnimationUsingKeyFrames 有 Discrete 、 Linear 、 Spline 和 Easing 派牛•类似， 
DoubleKeyFrame 也有 Discrete > Linear、Spline 和 Easing 类 派生。 

以卜项目使用 ColorAnimationUsingKeyFrames 对 M 格背眾•进行着色，而颜色是贯穿粮 
个彩虹的动画。 

项 FI: RainbowAnimation | 文件 ： Main Page, xaml (片段 > 



<Grid.Background 〉 

<SolidColorBrush x:Name="brush" /> 



e.Triggers> 

<EventTrigger> 

< Beg i nS t o r yboa r d> 

<Storyboard RepeatBehavior-"Forever"> 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" 

Storyboard. Target Property="Color' , > 
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="*F"F0000" /> 
<LinearColorKeyFrame KeyTime="0:0:1" Value= • ，番 ETFF00" /> 
<LinearColorKeyFrame KeyTime- M 0:0:2" Value-"HOOFFOO" /> 
<LinearColorKeyFrame KeyTime="0:0:3" Value*"#00FFFF" /> 
<LinearColorKeyFrame KeyTime="0:0:4" Value="#0000FF M /> 

Value=..«»FF00FF" /> 
Value= M «FF0000 n /> 


<LinearColorKeyFrame KeyTime-" 
<LinearColorKeyFrame KeyTime=" 
</ColorAnimationUsingKeyFrames> 
</Storyboard> 

</BeginStoryboard> 


</Page.Triggers> 
</Page> 


动 iLHj 时长 6 秒，结束值和开始值相同，也就是说，动_从开始处窀新开始时，+会有 
任何+连续。 





以下一对 PointAnimationUsingKeyFrames 对象，把 LinearGradientBrush 对象的 StarlPoint 
和 EndPoint 属性变成了动画，从而绕圈渐变。 

项 GradientBrushPointAnimation I 文件 ： Main Page. xaml (IV®) 



<Grid. Background 

<LinearGradientBrush x:Name="gradientBrush"> 
<GradientStop Offset»"0" Color="Red" /> 
<GradientStop Offset="l" Color-"Blue" /> 
</LinearGradientBrush> 

</Grid.Background 〉 



<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard RepeatBehavior="Forever"> 

〈PointAnimationUsingKeyFrames Storyboard.TargetName="gradientBrush" 

Storyboard.TargetProperty="StartPoint" 
EnableDependentAnimation»"True"> 
<LinearPointKeyFrame KeyTime="0:0:0" Value="0 0" /> 
<LinearPointKeyFrame KeyTime="0:0:l" Value="l 0" /> 
<LinearPointKeyFrame KeyTimewOsOd** Value= n l 1" /> 
<LinearPointKeyFrame KeyTime»"0:0:3" Value= w 0 1" /> 
<LinearPointKeyFrame KeyTime= M 0:0:4" Value="0 0" /> 
</PointAnimationUsingKeyFrames> 


<LinearPointKeyFrame KeyTime="0 
<LinearPointKeyFrame KeyTime="0 
<LinearPointKeyFrame KeyTime="0 
<LinearPointKeyFrame KeyTime* n 0 
<LinearPointKeyFrame KeyTime="0 
</PointAnimationUsingKeyFrames> 
</Storyboard> 
c/BeginStoryboard> 


Storyboard.TargetProperty=" 
EnableDependentAnimation= M T 
/Time= M 0:0:0" Value="l 1" / 
/Time="0:0:l" Value="0 1" / 
/Time= M 0:0:2 M Value :"。 0" /: 
/Time»"0:0:3" Value="l 0" /> 
/Time= M 0:0:4 - Value="l 1" /> 



</Page.Triggers> 
</Page> 


SplineColorKeyFrame . SplineDoubleKeyFrame 和 SplinePointKeyFrame 对象没有以前用 
得那么多，因为 EasingDoubleKeyFrame、EasingColorKeyFrame 和 EasingPointKeyFrame 取 
代了其大部分功能。随着关键帧的 Spline 变化，可以使用 KeySpline 对象来定义 W 寒尔曲 
线的两个控点，该贝塞尔曲线开始于点(0, 0), 终止于点(1，1)。本曲线 ( spline ) 执行和缓动 
函数弯曲时间的相同作用，以加速和减速动1_。下一章会举例说明。 


9.10 Object 动画 

Windows Runtime 动胆 i 系统还能对 Object 类切的 M 性进行动曲 j , 似乎能对一切进行动 
_，但有一个问题：没有带 From 和 To 属性的 ObjectAnimation 类。而只有 
ObjectAnimationUsingKeyFrames 类，而且唯-继承 tl ObjectKeyFrame 类是 
DiscreteObj ectKeyF rame 。 

换句话说，确实 " J * 以定义 H 标为任何类型的属性定义动画(只要该属性受依赖 M 性支 
持)，但动 iwiM 能用来把该属性设 腎为离 散值。 








在实践中，对象动画主要用于枚举类型或 Brush 类型的属性为目标，允许把厲性设 S 
为预定义的刷资源。大多用在控件模板甩，第1丨章会进行说明。 

但在下例中， Ellipse 绕着屏幕移动，其 Visibility 属性带枚举项 Visible 和 Collapsed , 
而其 Fill 属性则采用预定义刷。这些动画会引起 Ellipse 闪烁，由于使用了不同离散颜色， 
本项 | e | 称为 FastNotFluido 

项 FastNotFluid I 文件： MainPage.xaml ( 片段） 



<Canvas SizeChanged="OnCanvasSizeChanged" 
Margin="0 0 96 96"> 

〈Ellipse Narae=.’ellipse" 



<Page.Triggers> 




"horzAnima" 


Storyboard.TargetName="ellipse" 
Storyboard.TargetProperty="(Canvas.Left) 
From="0" Duration:"0:0:2.51" 


"True" 


RepeatBehavior=" 


<DoubleAnimation x:Name="vertAnima" 

Storyboard.TargetName="ellipse" 

S toryboa rd.Ta rget Proper ty="(Canvas.Top) 
From="0" Duration="0:0:1.01" 
AutoReverse="True" 

RepeatBehavior*"Forever" /> 



Storyboard.TargetName="ellipse" 

Storyboard.TargetProperty="Visibility" 

RepeatBehavior®"Forever"> 

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" /> 
<DiscreteObjectKeyFrame KeyTime= H 0:0:0.2" Value="Collapsed" /> 
<DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="Visible" /> 
<DisereteObjectKeyFrame KeyTime-"0:0:0.3" Value="Collapsed" /> 
<DiscreteObjectKeyFrame KeyTime="0:0:0.45" Value="Visible" /> 
</ObjectAnimationUsingKeyFrames> 



Storyboard.TargetName="ellipse" 

Storyboard.TargetProperty="Fill" 

RepeatBehavior="Forever"> 

<DisereteObjectKeyFrame KeyTime="0:0:0 M 

Value-"!StaticResource ApplicationPageBackgroundThemeBrush}" /> 
<DisereteObjectKeyFrame KeyTime= H 0:0:0.2" 

Value="{StaticResource ApplicationForegroundThemeBrush}" /> 
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" 

Value=" {StaticResource ApplicationPressedForegroundThemeBrush}" /> 
<DisereteObjectKeyFrame KeyTime="0:0:0.6" 

Value=" {StaticResource ApplicationPageBackgroundThemeBrush}" /> 
</ObjectAnimationUsingKeyFrames> 

</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 


•Triggers 〉 








有趣的是， DiscreteObjectKeyFrame 的 Value 属性 UT 以直接设冒.为枚平项的名称或■设 
腎为 StaticResource , 而不会造成类嘴混渚。 

代码隐藏文件叫以通过名字来访问某个动曲 I ，这是在 Triggers 部分定义 Storyboard 和动 
_的另一个优点。 

项月 ： FastNotFluid I 文件： MainPage.xaml.cs ( 片段 > 

void OnCanvasSizeChanged(object sender, SizeChangedEventArgs args) 

{ 

horzAnima.To = args.NewSize.Width; 
vertAnima.To = args.NewSize.Height; 


9.11 预定义动画和过渡 

一开始就说过 Windows . UI . Xaml . Media . Animation 包含71个类，如果你一直数着， 
能发现现在还没有到这个数字。 

除了 U 前为止提到的类以外，命名空间还包括14个预定义动画，均继承 Timeline , 
名称以 ThemeAnimation 结尾。这共动_ Li 经设胃了属性和 U 标属性，只需要带 TargetName 
属性的目标对象。因此，为了让你试试这些预定义动_，我创建了一个项 H , 其中有12个 
动田训不包括 SplitOpenThemeAnimation 和 SplitCloseThemeAnimation ， 不太适合木程序的机 
制)和其自己的 Storyboard 对象相关联，而 TargetName 设置为名称为 “ button ” 的 元素： 

项 R: PreconfiguredAnimations I 文件： MainPage.xaml <)V 段） 



<Page.Resources 〉 

<Style TargetType="Button"> 

〈Setter Property= H Margin M Value="0 6 M /> 
</Style> 

<Storyboard x:Key=”fadeIn"> 

<FadeInThemeAnimation TargetNcime="button" /> 
</Storyboard> 

<Storyboard x:Key=”fadeOut"> 

<FadeOutThemeAnimation TargetName="button" /> 
</Storyboard> 

<Storyboard x:Key="popIn"> 

<PopInThemeAnimation TargetName="button" /> 



<Storyboard x:Key="popOut"> 

<PopOutThemeAnimation TargetName=.’button" /> 



<Storyboard x:Key"reposition"> 

<RepositionThemeAnimation TargetName="button" /> 
</Storyboard> 

<Storyboard x : Key="pointerUp"> 

<PointerUpThemeAnimation TargetName="button" /> 
</Storyboard> 

<Storyboard x:Key="pointerDown"> 

<PointerDownThemeAnimation TargetName«"button" /> 
</Storyboard> 



r"swipeHint H > 

lemeAnimation TargetName="button" /> 



<Storyboard x : Key="dragltem M > 

<DragItemThemeAnimation TargetName="button , * /> 
</Storyboard 〉 


<Storyboard x:Key="dropTargetItem"> 

<DropTargetItemThemeAnimation TargetName= M button" /> 
</Storyboard> 

<Storyboard x:Key="dragOver"> 

<DragOverThemeAnimation TargetName="button" /> 
</Storyboard> 

〈 /Page.Resources 〉 


〈Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 
<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" /> 

<ColunmDefinition Width-"*" /> 

</Grid.ColumnDefinitions> 


<StackPanel Name="animationTriggersStackPanel" 
Grid•Column:"0" 
VerticalAlignment»"Center*'> 

<Button Content="Fade In" 

Tag«"fadeln" 

Click-"OnButtonClick" /> 

<Button Content*"Fade Out" 

Tag-"fadeOut" 

Click="OnButtonClick" /> 

<Button Contents"Pop In" 

Tag="popIn" 

Click- M OnButtonClick" /> 

<Button Content-"Pop Out" 

Tag="popOut M 

Click= M OnButtonClick" /> 

<Button Content*"Reposition M 
Tag="reposition" 

Click="OnButtonClick" /> 

<Button Content-"Pointer Up" 

Tag="pointerUp" 

Click= w OnButtonClick M /> 





<Button Content**"Drag Item" 

Tag=" drag I tern" 
Click^"OnButtonClick" /> 

〈Button Content= w Drop Target Item" 
Tag="dropTa rge11 tern" 
Click="OnButtonClick" /> 

<Button Content="Drag Over" 

Tag="dragOver" 
Click-"OnButtonClick" /> 



<! — Animation target --> 

<Button Name="button" 

Grid.Column="l" 

Content="Big Button" 

FontSize- M 48" 

HorizontalAlignment»"Center" 

VerticalAlignment="Center" /> 

</Grid> 

</Page> 

除了名为 “ button ” 的 Button 以外， XAML 文件还为毎一个预配置动定义 / Button 。 
代码隐藏文件使用 Tag 属性触发相应 Storyboardo 

项目： Preconf iguredAnimations | 文件： MainPage.xaml .cs ( 片段 } 
void OnButtonClick(object sender, RoutedEventArgs args) 

« 

Button btn = sender as Button; 
string key = btn.Tag as string; 

Storyboard storyboard = this.Resources[key] as Storyboard; 
storyboard.Begin(); 


小心！其中一些动画会导致 U 标 Button 消失，而另外一些动画则相当微妙，但你会看 
到要添加到自己的应用程序的其中某些效果。 

预定 义动画 的另一 种设霄 继承自 Transition 的8个类。这些都是更复杂的动_设賈，可 
以设置如下 TransitionCollection 类型的属性: 

• UlElement 所定义的 Transitions 属性 

• ContentControl 所定义的 ContentTransitions 属性 

• Panel 所定义的 ChildrenTransitions 属性 

• ItemsControl 所定义的 ItemContainerTransitions 属性 

例如，试试用以卜语句在 PreconfiguredAnimations 程序更换 StackPanel 标签： 

<StackPanel Name="animationTriggersStackPanel" 

Grid.Column- M 0" 



<StackPanel.ChildrenTransitions> 



<EntranceThemeTransition /> 
</TransitionCollection> 
</StackPanel.ChildrenTransitions> 


现在，豇面加战时，按钮似乎从实际位置平移了一点点并移动到位。 
第11章和第12章将针对这些过渡进行更多讨论。 


第 10 章变 换 

在第9章中，你看到 r 如何使用动_在屏辂上移动对象、改变其大小、颜色或透明度， 
甚至在虚线上移动点。但是，没有提到某些类甩的动画。如果点击按钮.想用动_来旋转 
按钮，该怎么做？我不是说故意让按钮疯狂旋转，但也许可以轻轻摇晃按钮，好像 在说： 
“我根本无法压制热情.就是想要执行你要的命令。” 

此项任务(和其他类似任务)所需要的就是变换。过去，变换称为“图形变换”（甚至讨 
能吓跑外行的叫法“矩阵变换”）。而近年来.变换匕从图形专家 的魔爷 中获得解放，所有 
程序员都能用了。 

这并不是暗示变换不再和数学相关。（是的，还是和数学有关。 ） 但在 Windows Runtime 
中可以使用变换，不涉及变换的数学知识。 

10.1 简短回顾 

变换难本 h 就是数学公式，应用丁•点 ( x ，_ y ) 来创建新点( X ’，/ )。如果把冋样的公式应 
用于吋 视化对象的所有点，则可以有效移动对象，或改变其大小，或荇旋转对象，或者甚 
至以+同的方式扭曲对象。 

Windows Runtime 的变换受 UIElement 定义的项厲性 il 持： RenderTransform 、 
RenderTransformOrigin 和 Projection 。 这些属性由 UIElement 定义，因此，变换并+像过去 
一样仅限 T •矢量图形。可以对任何元素使用转换，包括 Image、Text Block 和 Button 。 如果 
对 Panel 衍生对象应用变换，比如 Grid , 则町应用于该 Panel 上的所有子对象。 

要把变换应用到元素，以使用属性元 iK ( property - element ) 语法把 RenderTransform 厲 
性设賈为继承自 Transform 的类实例，例如 RotateTransform 。 

项 R: SimpleRotate I 文件： MainPage • xaml ( 片段 } 

<Grid Background*"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Image Source*"http://www.charlespetzold.com/pw6/PetzoldJersey.jpg" 

Stretch="None" 

HorizontalAlignment="Right" 

VerticalAlignment="Bottom"> 

<Image.RenderTransform> 

RotateTransform Angle="135" /> 

</Image.RenderTransform> 

</Image> 

</Grid> 


RotateTransform 的 Angle 属性表•顺时针旋转 135 度，如卜图 所示。 
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但结果只是看起来合理，因为我知道 Image 会相对于其左上角旋转，所以有意把 Image 
元素定位在页曲心下角。 .维旋 转以总 是围绕 卷某个特定点(就像是把照片钉在软木板 I :的 
大头钉)而 iF 确设 W . 该点则是处理变换比较需要技巧的一个方面。 

吋以把 RenderTransform fc 4 性设置为继承& Transform 的7个类中的任何一个，枨据数 
学复杂程度由简到繁大致如下排列。 

Object 

DependencyObject 
GeneralT ransform 
Transform 

T ranslateT ransform 

ScaleTransform 

RotateTranslbrm 

SkewTransform 

Composite 丁 ransform 

MatrixTransform 

T ransformGroup 

这些类定义: r 传统：维仿射变换。“仿射”一词暗示已变换对象和未变换对象有密切 
的联系：一条 n 线总是变换成另一条苠线。位置、大小或方位可能不同，但仍然是一条良 
线。仿射变换之前平行的直线在变换后仍然保持平行。仿射变换+会导致东两变为尤分大。 
仿射的数学定义也的确是“保留有限性。” 

Windows Runtime 还支持常用于7维透视图的特定类喂非仿射。把 UIElement 定义的 
Projection 厲性设置为派生& Projection 两个类其中之一的实例，就•以使用 Windows 
Runtime 实现三维透视图效果。 

Object 

DependencyObject 

Projection 




PlaneProjection 
Matrix 3 DProjection 

工维旋转总是围绕轴进行。 围绕 Y (垂直)轴的旋转如以下 SimpleProjection 项 U 所示。 


项目 ： SimpleProjection | 义件： MainPage.xaml ( 片段） 

<Grid Background* 5 ，，{StaticResource ApplicationPageBackgroundThemeBrush}"> 
〈Image Source="http:"www.charlespetzold.com/pw6/PetzoldJersey.jpg" 



VerticalAlignment="Center'*> 
<Image.Projection 〉 



这样就产生了 •种截然不同的旋转，看上去像是给屏幕的两个维度增加了第三个维度，如 
卜'图所示。 



M 然，这种变换不会保留平行线，所以看起来好像是在 3 D 空间中。 

Projection 变换有时也称作伪 3 D 变换，旨在为 Windows Runtime 提供 3 D 效果。吋以 
定义一个动画，让元素看起来像是一扇门摇晃着进入视线，或者像是扑克牌在翻转，但是 
元素本身+是 3 D 的。 Projection 类之一指的是‘‘平面”。基本上是亨一个 2 D 76索在 3 D 空 
间内移动。 

有数础的程序员也许能够让 Matrix 3 DProjection 在 Windows Runtime 显 / j ; •实私的 
3 D 对象。 彳11 是 Windows Runtime 会丢失 3 D 的一些重要特性，比如基于光源表面渲染以及 
一个对象部分被另一个对象遮挡时所发生的裁剪。如果要给 Windows 8应用带来真正的 3 D 
图形，则需要使用 Direct 3 D , 而 Direct 3 D 只能从 C ++ 获得，而且(我很难过)超 ; li 了木书讨 
论范围。 


10.2 旋 转 


教程甩常常通过数学上简中的变换来开始讨论 变换： TranslateTransform 移动对象，而 
ScaleTransform 变大或变小对象。但这些都不会令人印象非常深刻，因为你已经看过用动 fflj 





在屏幕 h 移动对象或改变大小。所以，我要用一些其他方法做不到的事情来进行讨论。 

我刚刚演示了 mJ ■以直接在 XAML 里设 ff . RotateTransform 的 Angle 属性，但是用数据 
绑定或动 W 动态改变 Angle 属性更加有趣.而11其结果更能揭示实际要发生的事情。如 F 
XAML 文件所本， RotateTransform 的 Angle 属性值绑定了 Slider 的 Value 属性，范围从0 
到360。 

项 R: RoateTheText | 文件： MainPage.xaml < 片段 } 

<Grid Background®"(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
BorderThickness="1" 

HorizontalAlignment="Center" 

VerticalAlignment="Center"> 

<Grid> 

<Grid.RowDefinitions> 

〈RowDefinition Height="Auto" /> 

<RowDefinition Height="Auto" /> 

</Grid.RowDefinitions> 

〈Slider Name="slider" 

Grid.RoW'O- 



TextBlock Text=.'Rotate Text with Slider" 


Grid.Row=”l" 

FontSize="48"> 



</TextBlock.RenderTransform> 

</TextBlock> 



Slider 和 TextBlock 占据 Grid 的两行，而 Grid 在 Border 中。屏幕第一次打幵时如下图 
所示。 


Rotate Text with Slider 


TextBlock 宽度决定了 Grid 宽度，而后荠又决定了 Slider 宽度和 Border 宽度。 

如果用鼠标或手指改变 Slider 值， TextBlock 会顺时针方向旋转。如果旋转120度，结 
果如 卜图 所示。 
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很明显， Grid 和 Border 的大小继续堪于米旋转的 TextBlock , 而己 旋转的 TextBlock 
则打破了可视树 t 其祖先的边界。 

设置给 RotateTransform 的 UIElement 属性称为 RenderTransform , 需要仔细考虑一下该 
属性名。 “ render ” （渲染)一词意味着转换影响的只是元素的渲染方式，而小是元索的布局 
系统。这 M 既有好事也有 坏事。 

变换发屮在图形组成系统的较深层次，这是好事。旋转 TextBlock 小要求整个视觉树 
受到更新布局的影响。布局系统+参与变换，因此，变换动画可以发生在辅助线程中，而 
且性能很好。布局系统完全不关注 TextBlock 正在旋转。 

而坏事是，布局系统完全不知道 TextBlock 疋在旋转。例如，想要旋转90度来显示一 
个侧向的 TextBlock , 也许是对图的旁注。如果布局系统能计算 TextBlock 的旋转维度，则 
iJj ■以直接将其放在入 Gird 的中-元格中，并用 Grid 正确定位，这样最方便。但 Windows 
Runtime + 太容易实现。 

相比之 K，Windows Presentation Foundation ( WPF ) 所提供的 UIElement 版本既定义了 
RenderTransform 属性(像 Windows Runtime —样)，也定义了 LayoutTransfbrm 属性，£1•者允 
许指定布局系统可识别的变换。 WPF 在向 Silverlight 和 Windows Runtime 过波时失去了 
LayoutTransform 属性，模仿它;箱要花一点 气力。 

我们回到正在运行的 RotateTheText 程序。 操纵 Slider , 以便 TextBlock 可以有一部分 
位于 Slider h 方，如下图所示。 
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现在，从屏幕 il ，： 开所有手指(或释放鼠标按钮)，试试触換或点击 Slider 和 TextBlock 
甫赍的仟何点。 Slider 没有反应，因为 TextBlock 阻碍了鼠标或触摸输入。这里有个 经验： 
尽管布局系统不知道 TextBlock 已经移动了，但点击测试逻辑会持续关注 TextBlock 的准确 
位置。（另一方面，实际操作 Slider 的过程中 ， TextBlock +会妨碍操作，因为 Slider 捕获了 
操作输入，第13章将讨论捕获概 念。） 

你还会注意到， TextBlock 的旋转是相对亍其左 L 角，从概念上讲是 TextBlock 的源点 
(0, 0 )o 在许多图形系统中，图形变换迎常是相对于画布的源点，而图形对象则定位在 W 
布匕在 Windows Runtime 中，所有变换都是相对丁 •其 应用的元素。 

通常都会偏好旋转相 对于某 个点，而不是相对于左上角。该点有时称为“旋转中心”， 
町以用 '种不同方法来指定。 

第一种方法是变换所蘊含数学的最炤发性方法，但以后再讲。 

第_ :种方法涉及 RotateTransform 类 本身。 该类定义了 CenterX 和 CenterY 属性，默认 
值为0。如果想要该 TextBlock 相对于其中心旋转，可以把 CenterX 设贾为 TextBlock 宽度 
的一半，而把 CenterY 设置为其尚度的一半。 Loaded 处理程序可以获得此信息，所以吋以 
添加以卜类似代码到后台代码文件的构造函数中。我给 TextBlock 的名称幸好还没有在 
XAML 文件中使 用过： 

public MainPage() 



你吋能会觉得这种方法有点麻烦，因此会高兴地发现第三种方法更简中.。该方法涉及 
UIElement 所定义的 RenderTransformOrigin 属性。该属性是 Point 类型，但将其设胃为相对 
平标点，通常是 范闹从 0到 I 的 X 和 Y 值。默认值为点 (0,0), 即左上角。点(1，0)为右上 
角，点(0, 1) 为左下角，点<1，1)为右下角。要指定元素中心的源点，可以使用点(0.5, 0.5): 



<TextBlock.RenderTransform> 

<RotateTransform Angle="(Binding ElementName=slider, Path=Value}" /> 



注总 ， CenterX 和 CenterY 是 RotateTransform 的属性，但 RenderTransformOrigin f /爲 性 
则由 UlElement 所定义，并为全部元素所共有。如果除了 CenterX 和 CenterY ，， 还设胥了 
RenderTransformOrigin ， 则 会产生 混合效果。在本例中，两个例子的混合效果导致 TextBox 
围 绕着其厶下角旋转。 

吋以指 定位于 元素以外的旋转中心。如 K XAML 文件将 TextBlock 定位 在贞血 顶部中 
心，并动 Forever 动_来旋转它。 






( 片 段 ) 


StaticResource ApplicationPageBackgroundThemeBrush)" 
e="txtblk M 


</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers> 

</Page> 

不需要任何额外代码，该程序就会绕着左 L 角旋转 TextBlock, 并在动 iWi 期间的某些时 
刻淸除屏幕。隐藏代码文件甩的构造函数定义了两个洱件处理程序以设背 RotateTransform 
的 CenterX 和 CenterY 属性。 


项 R: RotateAroundCente 
public sealed partial c 
( 

public MainPage() 


age.xaml.c 
: Page 


3 .InitializeComponent(); 


txtblk.ActualWidth / 


SizeChanged + = (sender. 


2.CenterY = args.NewSize.Height 


旋转中心设腎为 1 j TextBlock 水平居中而又低 T TextBlock, 等于页面尚度一半的一 
点。其结果是 TextBlock 绕着页面中心做圆周运动，如卜图所示。 
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10.3 可视化反馈 

动_变换能有效提醒用户屏幕上的情况，而这些情况要求关注或确认操作 lJ ■启动 。在 
JiggleButtonDemo 程序中，我添加了一个新的 UserControl , 名为 JiggleButton ， 但后来我把 
XAML 和 C # 文件中的基类从 UserControl 改成了 Button 。 以下是完整的 JiggleButton.xaml 

文件。 

项目： JiggleButtonDemo I 文件： JiggleButton.xaml 



x : Class="JiggleButtonDemo.JiggleButton" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
RenderTransformOrigin«"0.5 0.5" 

Click="OnJiggleButtonClick"> 

<Button.Resources 〉 

<Storyboard x:Key= •’jiggleAnimation"> 

<DoubleAnimation Storyboard.TargetName="rotate" 

Storyboard.TargetProperty="Angle" 
From="0" To= N 10 M Duration-" 。： 0:0.33" 
AutoReverse="True "〉 

<DoubleAnimation.EasingFunction> 

<ElasticEase EasingMode="EaseIn" /> 
</DoubleAnimation.EasingFunction> 
</DoubleAnimation> 

</Storyboard> 

</Button.Resources 〉 



<RotateTransform x : Name="rotate" /> 

</Button.RenderTransform> 

</Button> 

该 XAML 文件没有定义 Button 的内容，而是设置了三个 Button 属性： 
RenderTransformOrigin (在根标签里 )、 Resources 和 RenderTransforrru —般情况 K ， 如果想 
用旋转来摇晃元素，则需要用关键帧，因为首先要从0度旋转到10度，然后从10度到 -10 
度，并来回几次，然后再回到0度。但使用带有 Easeln 的 EasingMode 的 ElasticEase 是另 
外一个好办法。 DoubleAnimation 定义为旋转按钮10度然后回0,但 ElasticEase 函数包含 
宽幅的反向摆动，所以动_范围实际上是从 -10 到10度。 

JiggleButton 的隐藏代码文件直接在 Click 事件处理程序中触发动画。 

项 FI: JiggleButtonDemo I 文件： JiggleButton.xaml.cs 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Media.Animation; 

namespace JiggleButtonDemo 
( 

public sealed partial class JiggleButton : Button 

{ 

public JiggleButton(> 

{ 

this.InitializeComponent(); 


void OnJiggleButConClick(object sender, RoutedEventArgs args) 



Windows 租序设计 ( 第 6 版 } 


(this•Resources["jiggleAnimation "】 as Storyboard).Begin(); 


MainPage.xaml 实例化 JiggleButton , 以便使用： 

项 H: JiggleButtonDemo | 文件 MainPage.xaml ( 片段 } 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<local : JiggleButton Content= n JiggleButton Demo" 



记住， JiggleButton 派生自 Button , 以像用其他 Button —样来使用 JiggleButton ，+ 

过小应该对其设置 RenderTransform 或 RenderTransformOrigin 属性，否则会干扰摇晃动 Mo 

10.4 平 移 

TranslateTransform 定义 X 和 Y 两个属性，其结果是元素渣染偏移原位 lUTranslateTransform 
有一个简中.应用，用“浮雕”、“雕刻”或阴影来显示文本， 如下图 所示。 



Drop Shadow 

光线一般来上部，而且也许因为我们习惯于左上方光源照亮电脑屏幕上的 3 D 对象 
的惯例，因此，顶部文木看起来在右边和底部都有阴影，这些字母就像从屏幕向外投射。 
雕刻效果则 相反： 阴影在左上边上顶部，字母似，乎是雕刻而成。 

显示这三个文本字符串的页面实际上由6个 TextBlock 元素组成。第一对中有一个 
TextBlock 带默认前景刷，被另一个带默认背景刷的 TextBlock 所覆盖，后者在纵横方向 t 
位移2个像索。 

项月： TextEffects | 文件： MainPage.xaml ( 片段 > 



<Style TargetType="TextBlock"> 

<Setter Property="FontFamily" Value=»"Times New Roman" /> 
<Setter Property="FontSize , * Value="192" /> 

<Setter Property»"HorizontalAlignn>ent" Value="Center" /> 
<Setter Prop€rty="VerticalAlignment M Value="Center" /> 
</Style> 
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<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 
<Grid.RowDefinitions> 

<RowDefinition Height:”*" /> 

<RowDefinition Height-***" /> 

<RowDefinition Height®"*" /> 



<TextBlock Text-"EMBOSS" 

Grid.Row="0" /> 

<TextBlock Text="EMBOSS" 

Grid.Row="0" 

Foreground="{StaticKesource ApplicationPageBackgroundThemeBrush}"> 



</TextBlock 


RenderTransform> 



<TextBlock.RenderTransform> 



Foreground="Gray M > 

<TextBlock.RenderTransform> 

<TranslateTransform X- H 6 M Y- M 6" /> 
</TextBlock.RenderTransform> 
</TextBlock> 


<TextBlock Text="Drop Shadow" 

Grid.Row="2" /> 

</Grid> 

</Page> 

注意，浮雕效果需要负偏移(因此顶部的 TextBlock 向左向上移动)，而雕刻效果则要求 
正偏移。如果在暗色主题中使用这些相冋效果，可能不人明 M , 但必须交换 X值和 Y 值的 
符号。 

阴影效果与此相类似，只不过一般顶部文本着色，而 K 方有灰色阴影偏移。 

我不推荐长期使用以下方法，但可以把屏幕上的文字稍稍加深一点，即视觉深度而不 
是智力深度，使用一堆 TextBlock 元素的后果是因为一个像索而产生偏移，如下图所示。 



TransiateTransform 不错，能将东两从布局系统所定位的位置移幵一点点。 
StandardStyles . xaml 文件有好几个例子都是通过这种方式来使用 TransiateTransform 的。 

第9章有一个例子，用 Canvas . Left 和 Canvas . Top 附加属性在屏格 h 移动对象。通过 
定义一个相同类墩的动 W ， 以在希望移动的元索中定义 TransiateTransform 元素，并使动 
- 以 X 和 Y 属性为 H 标。这样做有一个优点，动画元素不必是 Canvas 的子对象，但在性 
能 I :似乎并没有差异。这两种动画都吋以在辅助线程中执行。 


10.5 变换组 

前面提到过，有7种方法吋以设賈中心旋转，但我把第一种方法留到以后再讨论，现 
在是 i 、 H 仑的时候了。第一种方法比较复杂一点，因为涉及到由其他变换所构成的变换。 

TransformGroup 派生自 Transform ， TransformGroup 有一个名为 Children 的 
TransformCollection 类型属性， uj •以用它来从多个 Transform 派生构建复合变换。 

叫以定义如卜类似的 RotateTransform 。 

<RotateTransform Angle="A" CenterX="CX" CenterY="CY" /> 

A 、 CX 和 CY 可以是实际数字，也吋能是数据绑定。其变换等同 于以下 TransformGroupo 




<TransformGroup> 

<TranslateTransform X="-CX" Y» W -CY" /> 

<RotateTransform Angle="A" /> 

<TranslateTransform X- M CX M Y= M CY" /> 

</TransformGroup> 

两个 TranslateTransform 标记似乎相抵消，但两 者围绕 着一个 RotateTransform 。 我用 

两种方法来演示该变换组本身相当于第-个 RotateTransform 。 

以下 ImageRotate 程序引用了我网站上的一张位图，320像素宽，400像素高。为了使 

其围绕中心旋转， RotateTransform 通常将 CenterX 和 CenterY 设置成-半值 ( B|l 160和 200), 

而我则使用了一对 TranslateTransform 对象。 

项 H: ImageRotate I 文件： MainPage.xaml 《片段 > 

<Page ... > 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Image Source=’’http:"www.charlespetzold.com/pw6/PetzoldJersey.jpg" 

Stretch="None M 

HorizontalAlignment= M Center'' 

VerticalAlignment="Center"> 

<Image.RenderTransform> 

<TransformGroup> 

<TranslateTransform X="-160" Y="-200 M /> 

<RotateTransform x:Name="rotate" /> 

〈TranslateTransform X="160" Y- M 200 M /> 

</TransformGroup> 

</Image.RenderTransform> 

</Image> 

</Grid> 

<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard BepeatBehavior="Forever"> 

<DoubleAnimation Storyboard.TargetName="rotate" 

Storyboard.TargetProperty="Angle" 

From= M 0" To="360" Duration="0:0:3"> 
<DoubleAnimation.EasingFunction> 

<ElasticEase EasingMode="EaseInOut" /> 

</DoubleAnimation.EasingFunction> 

</DoubleAnimation> 

</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers> 

</Page> 

带 EaselnOut 模式的 ElasticEase 动 _ 导致图片在实际旋转前后疯狂地来回摇摆， 但吋 
以沾楚地苻到旋转是围绕着图片中心进行的。如下图所示。 




F 图 S 示了此过程的各个步骤。最亮的 TextBlock 放置在页面中心位賈。下一个最黑 
的 TextBlock 显 TranslateTransform 的效果，后#移动 TextBlock ， 往左一半宽度，往— 
半高度。下一个最黑的 TextBlock 相对于其源点旋转，也就是最初的 TextBlock 左 .1 •.角 。诚 
后一个黑色 TextBlock — 半宽度、一半卨度移动。最终结果就是最初的 TextBlock 围绕其中 
心旋转。 



上图的 XAML 文件如下所示。 

项 R: Rota t ionCen tec Demo | 文件 ： Main Page, xaml ( 片段） 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="TextBlock M > 

<Setter Property*"Text" Value="Rotate around Center" /> 
<Setter Property= M FontSize M Value-"48" /> 

<Setter Property="HorizontalAlignment" Value="Center" /> 
<Setter Property-"VerticalAlignment w Value*"Center" /> 
</Style> 

</Page.Resources 〉 

<Grid Background*** {StaticResource ApplicationPageBackgroundThemeBrush)"> 
<TextBlock Name="txtblk n 

Foreground:"«DODODO” /> 


<TextBlock Foreground*"#A0A0A0"> 

<TextBlock.Rende rTrans form> 

<TranslateTransform x : Name="translateBackl" /> 
〈 /TextBlock.RenderTransform> 

</TextBlock> 


〈TextBlock Foreground="#707070 M > 

<TextBlock.RenderTransform> 

<Trans formGroup> 

<TranslateTransform x:Name="translateBack2" /> 
<RotateTransform Angle="45** /> 

</TransformGroup> 

</TextBlock.RenderTransform> 



<TextBlock Foreground^"{StaticResource ApplicationForegroundThemeBrush J"> 
<TextBlock.RenderTransform> 

<TransformGroup> . 

<TranslateTransform x:Name- M translateBack3" /> 

<RotateTransform Angle="45" /> 




</TextBlock.RenderTransform> 
</TextBlock> 


</Grid> 

</Page> 

Loaded 处理程序设置所有 TranslateTransform 标记的 X 和 Y 値： 

项 RotationCenterDemo I 文件： MainPage.xaml.es 《片段） 
public MainPage 0 
( 

this.InitializeComponent(); 

Loaded += (sender, args)=> 


translateBackl 

translateBack2 

translateBack3 

translateBackl 

translateBack2 

translateBack3 


X ■ -(translate.X = txtblk.ActualWidth / 2); 

Y = 

Y = 

Y - -(translate.Y = txtblk.ActualHeight / 2); 


变换可以结合一些非常有趣的效果，超出非数学、非图形程序员的领域。如下 XAML 

文件使用 Polygon 元素定义了一个简易的螺旋桨形状并对其他应用三个变换。 

RotateTransform、TranslateTransform 和另一个 RotateTransform 。 

项月 ： Propeller I 文件： MainPage• xaml ( 片段 > 

<Page ... > 

<Grid Background*"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

〈Polygon Points-" 40 0, 60 0, 53 47, 

100 40, 100 60, 53 53, 

60 100, 40 100, 47 53, 

0 60, 0 40, 47 47” 

Stroke="(StaticResource ApplicationForegroundThemeBrush)" 
Fill="SteelBlue" 

HorizontalAlignment="Center" 

VerticalAlignment="Center'' 

RenderTransformOrigin="0.5 0.5"> 

<Polygon.RenderTransform> 

<TransformGroup> 

<RotateTransform x : Name="rotatel" /> 

<TranslateTransforra X="300" /> 

<RotateTransfom x:Name="rotate2" /> 

</TransformGroup> 

</Polygon.RenderTransform> 

</Polygon> 

</Grid> 

<Page.Triggers 〉 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 

<DoubleAnimation Storyboard.TargetName="rotate1" 

Storyboard. Target Property B ="Angle" 

From="0" To="360" Duration- ,, 0:0:0.5 M 
RepeatBehavior="Forever" /> 

<DoubleAnimation Storyboard.TargetName="rotate2" 

Storyboard.TargetProperty="Angle" 

From="0" To»"360" Duration="0:0:6" 
RepeatBehavior="Forever" /> 


</Storyboard> 
</BeginStoryboard> 






</Page.Triggers 〉 


Storyboard 包含两个 DoubleAnimation 对象。第一个 DoubleAnimation 以第一个 
RotateTransform 对象为目标，旋转螺旋桨围绕其中心自转，速度为每秒2圈。 
TranslateTransform 移动旋转的螺旋桨到离员面右边中心300像桌的地方，而第二个 
DoubleAnimation 以第•-个 RotateTransform 为 tl 标，再次旋转螺旋桨。但该旋转则相对于 
螺旋桨原来的中心，也就是说，螺旋桨围绕着页面中心做圆周运动，半径为300像#，速 
度为每分钟10转。如下图所示。 


X 


现在 ， RenderTransformOrigin 的作用也 i 午就淸楚了： RenderTransformOrigin 相当于通 
过变换前 RenderTransform 属性所指定的负 X 值和 Y 值执行一个 TranslateTransform ， 并通 
过 RenderTransform 之后的 X 值和 Y 值执行另一个 TranslateTransform 。 

10.6 缩放变换 

ScaleTransform 类定义 ScaleX 和 ScaleY 屈性，两者用 F 在水平和垂貞方向独立增加或 
减少元索的大小。如果想保留 H 标的正确长宽比， ScaleX 和 ScaleY 则需要使用相同的值。 
如果是动_，则需要两个动 Iffii 对象。 

ScaleTransform 并不影响元素的 ActualWidth 和 ActualHeight 属性。 

你 Li 经看到了如何使用 Viewbox 以破坏字体 il : 确宽离比的方式来拉仲 TextBlock 。 而如 
何用 ScaleTransform 来实现，则如卜所示。 


项 R: OppositelyScaledText I 文件： MainPage.xaml (IV©) 



<TextBlock.RenderTransform> 
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<ScaleTransform x:Name="scale" /> 
</TextBlock.RenderTransform> 
</TextBlock> 



<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 

<DoubleAnimation Storyboard.TargetName="scale" 

Storyboard.TargetProperty="ScaleX" 
BeginTime= M 0:0:2" 

From="l" To="0.01" Duration="0:0:2" 
AutoReverse aM True" 

RepeatBehavior="Forever" /> 


<DoubleAnimation Storyboard.TargetName="scale" 

Storyboard.TargetProperty="ScaleY" 
From-"10" To="0.1" Duration= H 0:0:2" 
AutoReverse="True" 


</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers> 

</Page> 


RepeatBehavior="Forever" /> 


实际上，我并不是很想用这种方式来 S 这个程序。我原本给 TextBlock 设靑了 FontSize 
大小为丨，然后以动画形式把 ScaleX 从 I 变到144、 ScaleY 从144变到丨，两者再倒过来， 
一直屯复下去。这么做应该有用，但会导致144因子增加1像素高度，而不是变成144像 
蒺卨的字体。力能使程序按照我想要的方式 I :作.我把 TextBlock 设 S 为144像桌大小， 
并用动_效果彼此苻加。 TextBlock 在水平和垂肓交替拉伸，如下图所示。 



缩放 b 旋转冇一_相似，总是参照中 心点。 就像 RotateTransform —样 ， ScaleTransform 
类定义/ CenterX 和 CenterY 属件，或荇像我在 OppositelyScaledText 程序里做的一样，也 
吋以设置 RenderTransformOrigin 。 缩放中心是发生缩放时依然保持在同一位 S 的点。 

缩放和旋转中心在手指操作屏幕对象(如照片)的过程中发挥着重要作用。伸缩、捏压 
和旋转照片时，缩放和旋转中心会随着手指之间的相兄移动而改变。第13章会 i 、〗 论 il •算旋 
转中心的技巧。 

负缩放因子会围绕水平轴或_莨轴翻转元索。这一技巧对于创建反射效果尤其有用。 



318 


Windows 程序设计(第 6 版) 


不卞的是 ， Windows Runtime 缺少此效果的一个重要因素： Brush 类型名为 Opacity Mask 的 
UIElement 属性， OpacityMask 允许定义基于渐变刷颜色的阿尔法通道的渐变透明。在 
Windows Rimtime 中，必须通过用一个元素遮挡另一种元素来模拟渐变淡出，而后一个元 
素则有包含透明度和背景颜色的渐变刷。 

如以下 ReflectedFadeOutlmage 项 H 所示， Grid 的上半部分由两项共享：一个 Image 和 
另一个 Grid 。 第：!个 Grid 包含被一个 Recangle 覆盖的相同 Image ， 该 Recangle 的 
LinearGradientBrush 从顶部的背景色渐变到底部的透明色。 

项目 Project: ReflectedFadeOutImage | 文件： MainPage.xaml ( 片段 > 

<Page ... > 



<RowDefinition Height="*" /> 
<RowDefinition Height= M * M /> 
</Grid.RowDefinitions> 


Horizon 1 


"http:" 

italAliqr 


i.com/pw6/PetzoldJersey .： 



HorizontalAlignmenc*"Center"> 

<Grid.RenderTransform> 

<ScaleTransform ScaleY="-l" /> 
</Grid.RenderTransform> 


<Image Source="http://www.charlespetzold.com/pw6/PetzoldJersey.jpg" /> 
<Rectangle> 



<GradientStop Offset="0" 

Color-"{Binding 

Source={StaticResource ApplicationPageBackgroundThemeBrush|, 
Path=Color) w /> 


<GradientStop Offset="l" Color= ,, Transparent" /> 
</LinearGradientBrush> 

〈 /Rectangle.Fill 〉 

</Rectangle> 

</Grid> 

</Grid> 

</Page> 


如卜图所小 •， 内部的 Grid 也反射在底部边缘。 RenderTransformOrigin 在左卜方分配了 
—个变换中心， ScaleTransform 把 ScaleY 设 S 为-1,将围绕水平轴翻转元素。 
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在第14 $中，我将演术另一种方法，通过访问位图像素和适当设 S 透明度来实现这种 
效果。 


10.7 建立模拟时钟 

模拟时钟是圆形的。这一项简笮的事实意味着如果使用任意噔标(也就是说.坐标+是 
以像素为中.位，而是你方便选扦的笮位)以中心为原点，从数学讲画时钟吋能是最简笮的。 
选择以中心原点还意味萌能并 不需要 弄乱给 RotateTransform 对象的 CenterX 或 CenterY 
设 W , 而 RotateTransform 对象是定位时钟的指针，因为 IS (点也是旋转中心。 

在图形环境中，无论赋 f * 的大小，传统模拟时钟_能够 U 适应。很容易想用 Viewbox 
来完成这项工作，但对于模拟时钟而言，这么做吋能会'有问题。布局系统(和 Viewbox ) 认为 
矢最图形对象的大小会取决丁•坐标 点上的 最大 X 和 Y 值。负坐标会被忽略.包括以中心原 
点的四分之三个模拟时钟。 

布局系统(和 Viewbox ) 无法正 确确定带负坐标的图形对象大小，它需要一点点“帮助”。 
变换幸好能从父级传递到子级。可以在一个 Grid 设 胥一个 转换，并将其应用到 Grid 中的 
所有对象。而 Grid 呕的内容可以有自己的变换。 

我在 AnalogClock 程序中就是这么做的。 Grid 里的所有图形都是同定尺 、 j , 200像素 
的宽度和卨度，即半径为100 像素： 

<Grid Width="200" Height-™200"> 

...clock graphics go here 
</Grid> 

Grid 里有 五 个 Path 元素，用来渲染时钟圆周的刻度线，同时也渲染时针、分针、秒针。 
这些都 是基丁 •坐标系统， X 和 Y 值从 -100 到100。如果能看到 Grid M 格(红色标出)和时钟, 
效果如 F 图所冶。 



由于默认对齐,所以 Grid 定位在页面中心,但时钟的中心定位在 Grid 的左上角，因 
为点 (0, 0) 在那甩。 




现在，把 Grid 放入 Viewbox , 如下所示。 



〈Grid Width-"200 M Height="200"> 

...clock graphics go here 

</Grid> 

</Viewbox> 

Viewbox 可以正确处理原点位于左 I :角的元素，但不能处理带负肀标的图形(见卜 图)。 



幸运的是，很容易解决这个问题。所要做的就是移动 Grid 和时钟。 Viewbox 找到该元 
素，然后再发生变换.所以仅仅是100 像素： 

<Viewbox> 

〈Grid Width="200" Height="200"> 

<Grid.RenderTransform> 

<TranslateTransform X="100" Y="100" /> 



</Viewbox> 


如下图所示。 






现在，我们要去掉红色边界。 

时钟包含五个 Path 元索。三个指针均由包含直线和！ n 塞尔曲线的路径标记语法定义。 
时针要指向12:00点位置。时针最初主要是在时钟的 t 半部分，因此 当它围 绕着中心循环 
时，其大部分是负 Y 來标，只有少数正 Y 少标。 



C 5 7.5, - 5 7.5, -5 0 L -5 -20 
C -20 -30, 0 -30, 0 -60"> 
<Path.RenderTransform> 

<RotateTransform x : Name="rotateHour" /> 


</Path.RenderTransform> 


</Path> 


刻度线实际 I •.是虚线。以卜是小刻度线的 Path 元素。 



<EllipseGeometry RadiusX="90" RadiusY="90" /> 
</Path.Data> 

</Path> 


这样便创逑一个半径为 90 的圆，周 K ； 为27190,也就是说，60刻度被371分隔，这并非 
巧合，既是 StrokeThickness 的产品，又是 StrokeDashArray 的数字，表明 StrokeThickness 

中中.位点之间的距离。 

有了以上的小刻度线 Path , 如 卜是 大刻度 Path 。 



StrokeThickness="6" 

StrokeDashArray= w 0 7.854"> 

<Path.Data> 

<EllipseGeometry Radiu3X- H 90" RadiusY= M 90 M /> 
</Path.Data> 



再说一次，周长是 2 it 90, 但只有 12 个刻度，所以相距15 II ,足够接近6和 7.854 之 
间的结果。下面把代码放在一起。 

项 AnalogClock | 文件： MainPage.xaml ( 片段） 



<Page.Resources 〉 


Property="Stroke" 

Value="{StaticResource ApplicationForegroundThemeBrush}" 
Property^.’StrokeThickness" Value="2" /> 

"StrokeStartLineCap" Value="Round" /> 
"StrokeEndLineCap" Value="Round" /> 
= M StrokeLineJoin" Value= H Round" /> 
"StrokeDashCap" Value®"Round" /> 



</Style> 

</Page.Resources 〉 


Background: 


ApplicationPageBackgroundThemeBrushJ 
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<! -- Transform for entire clock --> 

<Grid.RenderTransform 〉 

<TranslateTransform X="100" Y-"100 w /> 
</Grid.RenderTransform> 

<!-- Small tick marks --> 

〈Path Fill»"(x:Null|" 

StrokeThickness» w 3" 

StrokeDashArray="0 3.14159"> 

<Path.Data> 

<EllipseGeometry RadiusX="90" RadiusY="90” /> 
</Path.Data> 

</Path> 


<!-- Large tick marks 一 - > 

〈Path Fill= w {x:Nulir 

StrokeThickness="6" 

StrokeDashArray» H 0 7.854"> 

〈 Path.Data 〉 

<EllipseGeometry RadiusX="90" RadiusY-"90" /> 
</Path.Data> 

</Path> 


<!-- Hour hand pointing straight up --> 

〈Path Data= M M 0 -60 C 0 -30, 20 -30, 5 -20 L 5 0 
C 5 7.5, -5 7.5, -5 0 L -5 -20 
C -20 -30, 0 -30, 0 -60"> 

<Path.RenderTransform> 

<RotateTransform x : Name-"rotateHour" /> 



</Path> 


<!-- Minute hand pointing straight up --> 

〈Path Data="M 0 -80 C 0 -75, 0 -70, 2.5 -60 L 2.5 0 

C 2.5 5, -2.5 5, -2.5 0 L -2.55 -60 
CO -70, 0 -75, 0 -80"> 

<Path.RenderTransform> 

<RotateTransform x : Name="rotateMinute" /> 

</Path.RenderTransform> 

</Path> 

<1 ― Second hand pointing straight up --> 

<Path Data= M M 0 10 L 0 -80"> 

<Path.RenderTransform> 

<RotateTransform x : Name="rotateSecond" /> 

</Path.RenderTrans form> 

</Path> 

</Grid> 

</Viewbox> 

</Grid> 

</Page> 

代码隐藏文件负责计算从12:00点开始顺时针方向的三个 RotateTransform 的角度测 ® 。 

项 H: AnalogClock | 义件： MainPage.xaml.es(il©) 
public sealed partial class MainPage : Page 
( 

public MainPage() 

( 

this.InitializeComponent(); 

CompositionTarget.Rendering += OnCompositionTargetRendering; 


void OnCompositionTargetRendering(object sender, object args) 

( 

DateTime dt = DateTime.Now; 

rotateSecond.Angle = 6 • (dt.Second + dt.Millisecond / 1000.0); 
rotateMinute.Angle = 6 * dt.Minute + rotateSecond.Angle / 60; 




rotateHour.Angle = 30 * (dt.Hour % 12) + rotateMinute.Angle / 12; 

) 

} 

该时钟有个长秒针，好像在不断移动。如果你喜欢每表一跳的滴答秒针，则可以直接 
从汁算器里删除毫秒。不过.更好的解决方案是使用一个间隔为1秒的 DispatcherTimer , 
而+用一直根扼视频刷新率的 CompositionTarget . Rendering 。 

10.8 倾 斜 

前曲別论过，派生白 Transform 的所有类限 F 定义：维仿射变换，而仿射变换的特征 
之一是保留平行线。然而，仿射变换不一定要保留线之间的角度。例如，仿射变换能将正 
方形变换成平行四边形(见下图>。 

在 Windows Runtime 中，这种类哦的变换称为“倾斜” （ Skew ), 但是在其他阁形环境 
中则称为“切变” （ Shear )。 图像在水平或垂直方向上正向或#反向逐步移位。在某种总义 
I '..倾斜是 M 极端的仿射变换，但仍保留了大部分原始几何图形。应用 T •圆 或者椭 圆的倾 
斜变换只能产牛椭圆(见下图沁 

1 j 之类似， W 寒尔曲线倾斜后仍然是贝塞尔曲线。 

SkewTransform 有 AngleX 和 AngleY 属性，可以以度将 其设賈 为角。卜 阁所示 例子通 
过 SkewTransform 创建，其 AngleX 设 S 为45度，从底部向右边倾斜。 uj •以设贾角度为负， 
则从底部向左边倾斜。对于文本，负 AngleX 值会造成倾斜效果(类似丁-斜体，但字符没冇 
任何印刷变化)。如下所示, AngleX 设置为 -30 度。 

Text -> Text 

AngleY 非岑设腎会导致垂苠方向的倾斜。 AngleY 的 IF . 值则导致阁形占侧向下倾斜(见 
下图)。 







负值异致厶侧向上倾斜。在默认情况 K , 图形 A : h 角和倾斜保持在迮同一位背， lu.Hr 
以用 CenterX 和 CenterY 属性或 RenderTransformOrigin 来进行改变。 

以下程序演水了把 AngleX 和 AngleY 倾斜结合在 '起所发生的情况。 

项 R: SkewPlusSkew I 文件： MainPage.xaml( 片段） 

<Page ... > 

<Grid Background:"IStaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock Text= M SKEW M 

FontSize="288" 

FontWeight- M Bold M 

HorizontalAlignment="Center" 

VerticalAlignment= M Center" 

RenderTransfomOrigin="0.5 0.5"> 

<TextBlock.RenderTransform> 

<SkewTransform x:Name="skew" /> 

</TextBlock.RenderTrans£orm> 

</TextBlock> 

</Grid> 

<Page.Triggers> 

<EventTrigger> 



〈Storyboard SpeedRatio="0.5" RepeatBehavior="Forever"> 

<DoubleAnimacionUsingKeyFrames Storyboard.TargetName="skew" 

Storyboard.TargeCProperty="AngleX"> 
<!-- Back and forth for 4 seconds — > 
<DiscreteDoubleKeyFrame KeyTime= M 0:0:0" Value="0" /> 

<LinearDoubleKeyFrame KeyTime="0:0:1" Value="90" /> 
<LinearDoubleKeyFrame KeyTiirve="0:0:2" Value="0 M /> 
<LinearDoubleKeyFrame KeyTime= ,, 0:0:3" Value= H -90" /> 
<LinearDoubleKeyFrame KeyTime= n 0:0:4" Value="0 M /> 

<!-- Do nothing for 4 seconds — > 

<DiscreteDoubleKeyFrame KeyTime="0:0:8" Value-"。" /> 

<!-- Back and forth for A seconds — > 

<LinearDoubleKeyFrame KeyTime="0:0:9" Value= w 90" /> 
<LinearDoubleKeyFrame KeyTime="0:0:10" Value= M 0 M /> 
<LinearDoubleKeyFrame KeyTime="0:0:11" Value=» M -90" /> 
<LinearDoubleKeyFrame KeyTime:" 。： 0:12" Value-"0" /> 
</DoubleAnimationUsingKeyFrames> 



<! ― Do nothing for 4 seconds --> 

<DiscreteDoubleKeyFrame KeyTime="0:0:0 H Value= M 0" /> 
<DiscreteDoubleKeyFrame KeyTime= M 0:0:4 , ' Value= M 0" /> 


<!-- Back and forth for 4 seconds —> 
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<LinearDoubleKeyFrame KeyTime="0:0:5" Value="-90" /> 
<LinearDoubleKeyFrame KeyTime="0 : 0 : 6" Value= H 0" /> 
<LinearDoubleKeyFrame KeyTime="0:0:7" Value="90" /> 
<LinearDoubleKeyFrame KeyTime= ,, 0:0:8" Value="0 M /> 



<LinearDoubleKeyFrame KeyTime="0 
<Linea rDoubleKeyFrame KeyTime»"0 
<LinearDoubleKeyFrame KeyTime="0 
<LinearDoubleKeyFrame KeyTime="0 
</DoubleAnimationUsingKeyFrames> 



</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers> 

</Page> 

我在 Storyboard 里把 SpeedRatio 设置为 0.5, 这样效果更好 -• 些,但我要用关键帧时 
间来进行 i 、 f 论。在第一个4秒，第一个动幽把 AngleX 属性变为90度 、 M 0、到 -90 度、 
冉回0。在 F •个4秒，第二个动幽把 AngleY 厲性在 -90 度和90度之间变化。在最; TJ — 
个4秒，两个动画一起运行。 

如下图所示，这种方式结合 AngleX 和 AngleY 而导致旋转，你可能会惊讶，也可能 
小会。 




然而，作为数7:结果，图形也变得吏大。 

倾斜常用来给元索增加 •点点 3 D 效果，似如果结合非倾斜元桌使用，效果会史好， 
本章后面将演不 、 


10.9 制作开场 

有时候，你想耍一个元系•在奴第一次加载时发牛:动画变换。例如， 元桌会 从侧 i ( n 消 
入.然; n 静止，或荇增大，或荇向 I :旋转。 

首先把元素定位在其不会变换的最终位 Si h , 这样着手处现一般圾容易。然后能定义 
变换和动_， 闵此， 允素会 iti 终结束在那个地方。经常吋 以在转 换中直接省去 
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DoubleAnimation 的 To 值，因为 To 值和动 W 前的默认值一样。 

如卜 SkewSlidelnText 项目所演示，可以看到， TextBlock 定义了一些转换，但根据默 
认值，元素就在 M 示屏幕中心。这就是 TextBlock 的最终位置和导向，而动胆 i 则结束丁•该 
点。 

项 FI: SkewSlidelnText I 文件： Main Page, xaml ( 片段） 



〈Grid Background^"{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<TextBlock Text="Hello!" 

FontSize="192" 

HorizontalAlignment» M Center" 

VerticalAlignment="Center" 

RenderTransformOrigin»"0.5 1"> 

<TextBlock.RenderTransform> 

<TransformGroup> 

<SkewTransform x:Name="skew" /> 

<TranslateTransform x:Name="translate" /> 



<Storyboard> 

<DoubleAnimation Storyboard.TargetName= H translate" 

Storyboard. Target Proper ty="X f, 

From="-1000" Duration="0:0:l" /> 

<DoubleAnimationUsingKeyFrames 

Storyboard.TargetName-"skew" 

Storyboard.TargetProperty="AngleX"> 
<DiscreteDoubleKeyFrame KeyTime= M 0:0:0" Value«="15" /> 
<LinearDoubleKeyFrame KeyTime-"0:0:1" Value="30" /> 

<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"> 
<EasingDoubleKeyFrame.EasingFunction> 

<ElasticEase /> 

</EasingDoubleKeyFrame.EasingFunction> 

</EasingDoubleKeyFrame> 

</DoubleAnimationUsingKeyFrames> 

</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers 〉 

</Page> 

应用丁 • TranslateTransform 的 DoubleAnimation 有 From 值 ， From 值让 TextBlock 从位 
丁最 终位 S 左边 1000 像素的地方开始。 To 值+存在，意味着动1_结束于动 M 前，即0。 

卜-述情况 IH 在发生的同时， DoubleAnimationUsingKeyFrames 开始倾斜进程，把 AngleX 
值从15度变到30度，就好像 TextBlock 被拉到屏嵇中心。最后关键帧通过动 W 将 AngleX 
回到动晒前的0值，并在此过程中进行摇晃。 

10.10 变换数学 

木章一开始就强调变换是公式，把点( X ， y ) 转换到 ( y , /), 并且将元素 h 的所有点都进 
行转换。现在要来看看数学了。 
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假设 TranslateTransform 把/和 K 属性 设贾为 7X 和 7T。 其变换公式把这些平移因子添 
加到 x 和 y: 

x=x + TX 
y=y + TY 

如果 ScaleTransform 的 ScaleX 和 ScaleY 属性设置從和灯，转换公式也非常 明确： 

x=SX^x 

y=SY*y 

现在，有了这些基础，我们幵始组合变换，比如在 TransformGroup 里。如果 
ScaleTransform 先发牛.，接着是 TranslateTransform， 则公式如下： 

x^SX-x^TX 

y=SY*y^TY 

但如果平移转换先应用，接着是比例转换，则公式有点儿 不同： 

x=SX*(x + TX) 
y=SX^(y + TX) 

平移因子现在实际 上是乘 以缩放因子。 

ScaleTransform 不仅定义 ScaleX 和 ScaleY 厲性，还定义 CenterX 和 CenterY。 前如曾 
讨论 了如何使用中心点构造两个平移。第一个平移是负的，接着是缩放或旋转，冉后是正 
向平移。假设把 CenterX 和 CenterY 设置为值 CY 和和 CK。 复合缩放公式 如下： 

x f = SX^x-CX)^CX 
/ = SX^(y-CY)^CY 

wj 以很容易确认点 (CX, CT) 变换成了点 (CX, CT ), 点 ( CY, CT) 具备缩放中心特 征：变 
换后未改变的点。 

在口前为止的所有情况中，/完全 依赖丁 •乘以X再加上; r 的常数，而/只依赖 f 乘以 
再加上 y 的常数。旋转的时候有点复杂，因为/同时依赖于1和>；，/也同时依赖丁-:^和少。 
如果 RotateTransform 的 Angle M 性设 賈为儿 则转换公式如卜： 

x f = cos( W yx 一 sin( j) •少 
y f = sin(>4Kr + cos(/l)«y 

这些公式很容易确认简单情况。如果/I 为0,则公式如 K: 

y=y 

如果 J 是90度，正弦为丨，而余弦为0,则 

y=x 

例如，点 (1. 0) 变换为 (0, 1>,则 (0, 1>变转为 (1, 0>。如果/!为〗80度.正弦为0,余 
弦为 - 1, 则有： 

y=-x 

这是闱绕着原点的反射， 通过把 ScaleTransform 的 ScaleX 和 ScaleY 都设 1 S 为 -I, 可 
以得到同样效果。如果/<为270度， 则有： 




y = 一文 


之前的第•张倾斜变换如卜图所示。 
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该倾斜的变换公式为 (AngleX 设钝为45度)： 

x' = x + y 



y =y 

如果 .v 等 ]• o(/i: 图形顶部)，则 x' 就等 r-jr. .v 僦等 T-.v。 但如果 1(0 卜移动图形， .v 会变 
大，因此/会比 A - 越来越大。如采把 AngleX 设腎为 / LV、 把 AngleY 设 W 为 /Ih 
SkevvTransform 的一般公 A 如 F: 

A^Ar + sint^A'Kv 

如果耍探索把旋转 U 其他变换结合作一起，这种类增符的号会变得相与笨拙。笮运的 
是，矩阵代数能发挥作用。如果把 1 丫 1 .个变换表达为矩阵，则吋以通过 LiYf 的矩阵乘法把变 
换 m 合起来。 

我们用一个 2X I矩阵来表示点 


ffl —个 2X2 矩阵宋表水 变换： 


MW M\2 
M2\ Mil 


mT 以用矩阵乘法来表术应用变换。其结果是变 换点： 

, MW M\2 . , „ 

\x vx = Lv v1 

1 ' 1 M2\ M22 1 1 

矩阵乘法的规则意味着有以 卜公式： 

x'= M\\>x+M2Uy 
y r = M\2-x + M22»y 

如果 Ml I 是 ScaleX 的值， M22 是 ScaleY 的值， M21 和 M!2 为 0, 则该过程适川 f 缩 
放。也适用丁-旋转和倾斜，两者都涉及到乘以 x 和 .v 的因子。 

似 该过程 +适用 T •平移。 f 移公式类似如卜所水： 

x=x + TX 
y' = y + TY 

平移因子自身相加,而不是乘以: c4_v。 如果不允许平移,而平移 又可能 是所有类型中 
M 简中的变化类甩，则如何 ffl 矩阵衣达般变换？ 



行趣的解决方案是引入第三维度。除了电脑屏冪 I •.的义和 y 轴外，概念性 z 轴会从屏 
幕1:延伸出来。我们假设在:维平 tfu kfli 图，但平面存在丁•三维空间之中，常平•标等 
于1。 

也就是说，点 U ，_ k ) 实际 上是点 ( X ， _ y , 1), 我们可以用一个 3 X 1 矩阵来 表示： 


矩阵变换为3 X 3矩阵，乘法如 K : 

Mil M\2 M 13 

\x y l|x M2\ M22 M23 =\x y z) 
M 3 \ Mil M 33 


矩阵乘法总味着公 式为： 

x'=MU-x+M2Uy+M3\ 
y=M\2KX+ M22-y+ A /23 
z=M\3>x+M23-y+M33 

现在成功 f 一部分，闪为变换公式包含了 M 31 和 M 32 的平移因子。这两个数7•都没 
有乘以 x 或者> 

没有完全成功，闵为 〆 一般+等 r 丨，也就是说，我们 d 经移出了 2 总是等 r I 的平面。 
回到该平曲的一个方法是茛接把所荇偏离的 〆 值都设贾为1。但是变换后远离 2 等 r 1的平 
面的那些点难逍小应该和变换后靠近该平 谢的 点区别出来吗？ 

有个好办法能让 2 值为丨，而 X 小会忽略，即采用 3 X 1 矩阵的值，并把所冇•:个平标 
都除以 a 


:網稱 1) 


这种用维乎标表•二维变换的方法称力 “ 齐次乎标 ” （Homogenous Coordinates ), rtl 
奥古斯特 • 莫比4斯 (August M 6 bius ) 在19世纪20年代发展起来，用来农尔当 r ’ 为岑时， 
结果是无穷大的一种 方法。 但对我们来说，无穷大坐标是一个问题。如果想避免无匁大肀 
标，则::外能为0。寥实 h , 只要确保 z 总是为 I ,则完全可以避免被 z 餘。 

MH 在矩阵 T \ 把 M 13 和 M 23 设腎为0、 M 33 设 S 力1,则吋能实现 h 述 耍求。 现在， 
变换以用完全保持在同一平 血1 •.的公式表达 如下： 

MW M \2 0 

\x y l|x M 21 M22 0 =\x y l | 

M 31 M 32 1 

这是二维仿射变换的标准矩阵表达式。（允许第二列有其他值会导致非仿射变换。因为 
这类矩阵能把 f •行线变换为非平行线，有时也称为“锥形变换”。> 

采 HJ 我之前使用的符号，把 ScaleX 设置力 SX , 把 ScaleY 设靑为 SY , 则 
ScaleTransform 为： 

SX 0 0 

\x y l|x 0 5 K 0 =\x / l | 

0 0 1 
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带 TX 和 TY 因子的 TranslateTransform 如下 

1 0 0 

|jc y l|x 0 10 =| x ’ . v ’ l | 

TX TY 1 

以 ( CX , CY > 为中心的 ScaleTransform 为三个 3 X 3 变换的 乘法： 

1 0 0 SAT 0 0 1 0 0 

\x y l|x 0 1 Ox 0 5 K Ox 0 1 0=|/ y l | 

-CX -CY 1 0 0 1 CX CY l 

类似，以角 A 和 ( CX , CY > 为中心的 RotateTransform 也表达三个 变换： 

1 0 0 cos (/ l ) sin (^) 0| 1 0 0 

\x y l|x 0 I Ox - sin ⑷ cos (/4) Ox 0 1 0 =| / / l | 

-CX -CY 1 0 0 \ CX CY \ 

有角 AX 、 AY 及一个中心的 SkewTransform , 如下 所示： 

10 0 1 sin (^ y ) 0 10 0 

\x y l|x 0 1 0 x sin ( AY ) 1 Ox 0 1 0 = \x' y l | 

-CX -CY 1 0 0 \ CX CY \ 

矩阵乘法有一个众所周知的属性，即不可交换。乘法顺序会造成影响。平移和缩放变 
换都演小了这点。如果首先是平移，平移冈子自身 Ui » J ■以被缩放因子而缩放。 

然而，某些类型的变换可以以任意顺序相乘。 

• 多个 TranslateTransform 对象。所有平移是毎个平移因子之和。 

• 具有同样缩放中心的多个 ScaleTransform 对象。所有缩放部是中.个缩放因子的 
结果。 

• 爲有相同旋转中心的多个 RotateTransforms 。 所有旋转是毎个旋转角度之和。 
此外，如果 ScaleTransform 具有相等的 ScaleX 和 ScaleY 属性，则其可以被 

RotateTransform 或 SkewTransform 以任意顺序相乘。 

Windows Runtime 定义了有6个属性的 Matrix 结构，6个属性对应类似如卜的矩阵中 - 
元格： 

A/ll M\2 0 

A /21 M22 0 

OffsetX OffselY 1 

该矩阵的最后一行是固定的。+能使用该矩阵结构来定义锥形变换或“史疯狂”的东 
叫。 OITsetX 和 OffsetY 是平移属性， Mil 和 M 22 的默认值为丨，其他四项厲性的默认值为 
0。对角线为 Is 的单位矩阵如 K : 

1 0 0 
0 1 0 
0 0 1 

该矩阵结构有返回值的静态 Identity 属性，以及如果矩阵的值足中.位矩阵，返冋 true 
的 Isldentity 属性。 




通过 ScaleTransform 和 RotateTransform 这样的“简中 Transform 派生，也有 "j 供选 
择的低级 MatrixTransform ， 而 MatrixTransfomi {]' Matrix 类型的属性。如果知道想要的矩 
阵变换，则可以直接按顺序指定六个数字 Mil 、 M 12、 M 21、 M 22、 OffsetX 、 OffsetY 。 以 
下是设 W 此变换的一种方法。 



<MatrixTransforrn Matrix-" 10 0 0 5 0 100" /> 

</TextBlock.RenderTransform> 

</TextBlock> 

该变换在水平方向的缩放因子是 10( M 11), 在萌直方向是 5( M 22), 然后移动 TextBlock 
卜降 100像疾 ( OiTsetY )。 但是也 " J ■以直接把变换设抨为 RenderTransform 屈件。 

<TextBlock — 

RenderTransform="10 0050 100" 

... /> 

Visual Studio 预览设计视图并不特别关心该语法，似在其编择器或 Windows 8中则没 
有问题。 

使用这种 MatrixTransfomi 隐忒形式在几种常见旋转变换是很方便的，如以卜程序所 
示。毎个 TextBlock 显示了应用于其的变换。 









</Grid> 


频繁引用的 .7 史精确的应该是 .707, 45度的正弦和余弦，以及(并非巧合>2的平方根的 
-半。 这8个变换的结果是每个 TextBlock 从前一个变化又旋转了 45度，如下图所承。 



如果符代码，会发现该 Matrix 结构 W Transform 方法，该方法把变换应川力•个点的 
值，并返回变换后的点。 

然而， Matrix 结构很不方便。缺少乘法操作符，无法轻松在代码中执行你 A 己的矩阵 
乘法。你 " J ■以自己写乘法代码， 或荇卩 J •以使⑴ TransfbmiGroup , 能内部执厅矩阵乘法，而 
结果只提供 Matrix 类喂的只读 Value 厲性。 如果志要执行矩阵乘法，4以在代码中创让 
TransformGroup . 添加-对初始化的 Transform 派牛:，并访问 Value 诚性。 

第13章会柯一 个贯耍 例子，如果要触投操作屏辂 I .的 对象，矩阵变换汁算在汁算缩放 
和旋转中心中的作用会变得 至关電 要。 

10.11 复合变换 

如果 结合外 种类甩变换.顺序是会产 牛:影 响的。然而在实际应用中， M 常就是想迆按 
非常标准的顺序来应用各种变换。 

例如.假设你想要旋转、缩放以及平移元索。 ScaleTransformM 常許先 !li 现， R 为般 
情况卜想根据未旋转几索来指定缩放比例。而 TranslateTransformia / r ； •出现，闵为一般怙况 
卜不会希荜缩放或旋转会影响平移 W f 。也就是说. RotateTransfomi 出现 在中间，即顺序 
是： 缩放、旋转、平移。 

如果这 S 你想要的顺序，则 1 Jf 以使 WJ CompositeTransform。CompositeTransform ff - •群 
匕定义试件.能用于按顺序执行 变换： 

• 缩放 

• 倾斜 
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• 旋转 

• 平移 

这些 厲性如卜所示： 

• CenterX 和 CenterY , 用于缩放、倾斜和旋转中心 

• ScaleX 和 ScaleY 

• SkewX 和 SkewY 

• Rotation 

• TranslateX 和 TranslateY 

如 H 、 程序使 ) H CompositeTransform 作为结合缩放和倾斜的简便方法。 

项 R Project: TiltedShadow | 义 • 件 ： Main Page, xaml (片段 > 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="TextBlock"> 

<Setter Property="Text" Value="quirky" /> 

<Setter Property="FontFamily" Value="Times New Roman" /> 
〈Setter Property="FontSize" Value="192" /> 

<Setter Property="HorizontalA1ignment" Value="Center" /> 
<Setter Property="VerticalAlignment M Value="Center" /> 

</Style> 

</Page.Resources 〉 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<!-- Shadow TextBlock --> 

<TextBlock Foreground="Gray" 

RenderTransfonnOrigin="0 1"> 

<TextBlock.RenderTransform> 

<CompositeTransform ScaleY="l.5" SkewX="-60" /> 



<!-- TextBlock with all styled properties --> 

<TextBlock /> 

</Grid> 

</Page> 

XAML 实例化两个 TextBlock 儿柰属性，在 Style ■指定大部分相同属性，包括 Text 
M 性，只耍和布周系统有关，两个元蒺就占据相 N 空间。底部为灰色，并应用缩放和倾斜 
变换，如下图所承。 
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注意， RenderTransformOrigin 设置为点(0, 1>,也就是说，变换是相对于左下角。然而， 
该 点坷以 指定为(1， 1) 或两者之间的任意一点，作用都 一样。 只需要两个 TextBlock 元素共 
享同一个底部边缘。 ScaleY 为 1.5, 用丁_把叫影高度提高50%。 SkewX 为 -60 度，应该会 
把底部移动到左边，但因为底部是缩放和倾斜的中心，因此顶部向右倾斜。 

如果仔细观察，会注意到下降部分的底部不十分符合 要求。 这是冈为 TextBIock 实际 
上在下降部分的底部延伸了一点。可以把 RenderTransformOrigin 变为 (0,0.96), 会能史符合 
要求。 

如果想要类似文本效果，但不要下降，该怎么办？如下图所示。 



需要用 RenderTransformOrigin , 其 Y 值等丁-基线以 h 文字的相对高度，这是问题。而 
这依赖于字体。对于该特定截图，我不断尝试，一直到得到了 (0, 0 .78), 但只适合 Times New 
Roman 字体。如果想用一般方式去处理这种问题，需要访问字体参数，而在 Windows 8应 
用程序只能通过 DirectX 获得字体参数。第15章将嵌示如何做到这一点。 


10.12 几何变换 


Geometry 类定义了 Transform 属性，自然引发了如 K 问题： 对 Path 儿索应用变换、对 
设 R 了 Path 的 Data 属性的 Geometry 对象应用变换，这两者有什么区别？ 

大的区别是，应用 T Path 的 RenderTransform 属性的 Transform 会 ifj 加笔 lii 宽度，而应 
用到 Geometry 的 Transform 则不会。 

以下有一个基于 RectangleGeometry 的 Path 元素，其高度和宽度均为10,但有一个变 
换应用到几何结构，按20的冈子来增加： 

〈Path Stroke="Black" 



<Path.Data> 


<RectangleGeometry Rect="0 0 10 10" 
Transform="20 0 0 20 0 0" /> 



结果肴起来是好像 Rect RectangleGeometry 的 Rect 值的尚度和宽度为200，如卜图 



所示。 
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该 XAML 具有相同的初始 RectangleGeometry , 但将变换应用 P Path ： 



StrokeDashArray=" 1 1" 
RenderTransform="20 0 0 20 0 0"> 



<RectangleGeometry Rect»"0 0 10 10" /> 



结果则大不相同，如卜’图 所示。 


然而对布局系统来说，这些元素则似乎相同。两个 Path 元素都被认为宽度和尚度为 1 (L 

10.13 画笔变换 

Brush 类定义了两个~变换相关的 属性： Transform 和 RelativeTransform ,两#之前的 
区别在于是让你堪于 ffli 笔的像索大小还是相对尺寸而指定平移闵子。 RelativeTransform 往 
往更好用，除非元素被陚 : T 了指定像素大小。 

以下复制了第3章中的 RainbowEight 程序，但使用的是动画画笔变换。我没有用 
TextBlock , 而取代了 8的 Path 演 〆 ，因力无法获得画笔通过 Repeat 的 SpreadMethod 属性 
对 TextBIock 进行重复。 

项 M: RainbowEightTransform | 义 • 件： MainPage.xaml ( 片段） 

<Page ••• > . 

<Grid Background^"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Viewbox> 

<Path StrokeThickness="50" 




Margin= n O 25 0 0"> 
<Path.Data> 



<PathFigure StartPoint="110 0"> 

<ArcSegment Size="90 90" Point="110 180" 
SweepDirection="Clockwise" /> 
<ArcSegment Size="110 110" Point="110 400" 

SweepDirection="Counterclockwise" /> 
<ArcSegment Size="110 110" Point="110 180" 

SweepDirection= M Counterclockwise" /> 
<ArcSegment Size="90 90" Point="110 0" 

SweepDirection="Clockwise" /> 



</Path.Data> 

<Path.Stroke> 

<LinearGradientBrush StartPoint="0 0" EndPoint="l 1" 
SpreadMethod="Repeat"> 
<LinearGradientBrush. RelativeTransf om> 

<TranslateTransform x:Name="translate" /> 
</LinearGradientBrush.RelativeTransform> 

〈GradientStop Offset="0.00 M Color="Red" /> 
<GradientStop Offset="0.14" Color="Orange M /> 
<GradientStop Offset= n 0.28" Color="Yellow n /> 
<GradientStop Offset="0•43" Color="Green" /> 
〈GradientStop Offset-^O.57" Color="Blue" /> 
<GradientStop Offset="0.71 M Color="Indigo" /> 
<GradientStop Offset="0.86" Color="Violet" /> 
<GradientStop Offset="X.00" Color:"Red" /> 
</LinearGradientBrush> 

</Path.Stroke> 

</Path> 



</Grid> 

<Page.Triggers> 



<Storyboard> 

<DoubleAnimation Storyboard.TargetName="translate" 
Storyboard.TargetProperty="Y" 
EnableDependentAnimation="True" 
From= H 0" To="-1.36" Duration="0:0:10" 
RepeatBehavior="Forever" /> 



</Page> 


图片如 F 图所示。 





标记 4* .有一个神奇数字，即 DoubleAnimation 的 To 值。它应用于 TranslateTransform 的 
Y 屈性，选抒该值的 U 的，是使带该值的被平移_笔相当丁-未平移 W 笔。你 " f 以肴到神奇 
数字是 1.36,我猜你想要知道其从何而来。 

如果 LinearGradientBrush 自 I'.lfu K ： StartPoint 为(0，0 )， EndPoint 为(0，1)， To 值则 
为-1。如果渐变从左到右 : StartPoint 为(0，0 )， EndPoint 为(1，0)，贝 1 J TranslateTransform 
的 X M 性为动 Pi U 标，而将冉次使 ffl 1或# -1 的 To 值。 

但如果渐变从一个角落到对面角落，默认 StartPoint 为(0, 0>, EndPoint 为 (1, 1>,则上 
述就+正 确了。 笔溲盖 Path 九素时 ， Windows Runtime 会汁算边界矩形，该矩形包括 
元蒺的几何尺、 j •加 I •.笔划宽度。 iffli 笔会延展到该边界矩形，如 K 图所小。 



渐变线沿着对角线，也就是说，常璜色彩的线条和渐变线呈直角。 

如果_笔冇 Repeat 的 SpreadMethod , Lfflj 笔在概念 I :会在指定偏移墩之外取复。如果把 
TranslateTransform 应用到 ffli 笔 I :，则 SpreadMethod 设置会 非常有用，闵为似7.无论怎么移 
动，画笔都会重复。 

如果 ffl 元素卨度来提尚_笔(即， TranslateTransform 的 Y 值为_1),未变换的笔底部 
边缘变成 ri _ L 变换的 in 笔顶部边缘，但 " j ■以存到如卜图所小结果，和前面的图样。 
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如果耍得到平消动_,:耍冉叫上移一点。但应该移动多少呢？ 

我们扩展该图以笔的一部分(见 K 图)，并把元索宽度标记为 “vv” 、高度标 
记为 “A” 、对角线 标记为 “cT ,而岛度增加标记为 “ Ah ” 。 



i « J ■以有多种方法算! liM , iUM 亩 .接 的方法也许是 ffl 相似:.角 形: 

d h + A/i 

IT d 

由此很容易得出 

AA = — 
h 

或希，我们真 iF . 想要的数字应当如 K 所, j ;- : 



试试从之前所示的 Path 插入数字。志耍把 StrokeThickness 添加到几何图形的宽度和高 
度。宽度为270,高度为450, M 是162。加上/；,并除以 A . 就这样得到了神奇数字1.36。 

想知道一 个史简| 丫 | .的方法吗？在 Storyboard TUU 史用两个 DoubleAnimation 对象 ，其 
中一个针对 y 厲忭，而另一个针对尤属性。把两#的 To 值设符为-1， 而毎 次循环时画笔 
同时向 h 和向々:移动。 

10.14 老兄，元素在哪里？ 


之前提到过.从 TranstbrmGroup ■以〖I•算得到 Matrix 值，但; t 法从你会期望的其他来 
源 Iftf 得到。例如，你会期望 GeneralTransformfTransform 和其他变换类派生丁此类)有 Matrix 



属性，但并没有。 

然而 ， GeneralTransform 类有 TransformBounds 和 TransformPoint 方法，以把变换应 
用到 Rect 值，在某些情况下这会很方便。 

假设有一个元素是而板的子对象。该曲板负责相对于面板本身来定位元素，不过该元 
素也 uJ ■以有应用了平移、缩放、旋转或倾斜的 RenderTransform 。 出 f •命中测试 UI 的，该元 
索的位 W 和方向对系统内部为已知。但你自己的程序能够找到元桌实际定位在哪甩吗？ 

当然能找到！最堪本(似 隐藏) 的方法由 UIEIement 定义，称为 TransformToVisual 。 通 
常可以带参数对元素调用该方法，而参数是元素的父类或者其他祖 先类： 

GeneralTransform xform = element.TransformToVisual(parent); 

该方法返回的 GeneralTransform 对象把元素哏标映射到父类坐标。但实际 I :,你肴不 
出这个变换！方法小会给你 Matrix ( ft . 而你能做的是调用 TransformPoint 或 
TransformBounds , 或者使用 Inverse 厲性。而你常常就需要这些。 

如下 XAML 文件把 CompositeTransform 厲性变成动 Iffli ， 使 TextBlock 在屏蒂上疯狂 
地运动。 

项 WheresMyElement | 义件： MainPage.xaml { 片段 } 

<Page ... > 



VerticaiAlignment= , 'Center" 
RenderTrans£ormOrigin= , '0.5 0.5"> 


<TextBlock.RenderTransform> 

<CompositeTransform x : Name="transform" /> 
</TextBlock.RenderTransform> 

</TextBlock> 


<Polygon Name=.’polygon" Stroke="Blue" /> 
<Path Name="path" Stroke="Red" /> 



<Page.Triggers 〉 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard x:Name*"storyboard"> 

<DoubleAnimation Stor^x>ard.TargetName="transform" 

Storyboard.TargetProperty» M TranslateX" 
From="-300" To="300" Duration="0:0:2.11" 
AutoReverse="True" RepeatBehavior^Torever" /> 
<DoubleAnimation Storyboard.TargetName="transform" 

Storyboard.TargetProperty="TranslateY" 
From="-300" To- M 300 H Duration="0:0:2.23" 


AutoReverse="True" RepeatBehavior="Forever" 
<DoubleAnimation Storyboard.TargetName="transform" 

Storyboard.TargetProperty="Rotation" 
From="0" To-"360" Duration= ,, 0:0:2.51 , ' 
AutoReverse="True" RepeatBehavior="Forever" 
<DoubleAnimation Storyboard.TargetName="transform" 
Storyboard.TargetProperty= M ScaleX" 
From="l" To="2" Duration="0:0:2.77" 
AutoReverse="True" RepeatBehavior="Forever" 
<DoubleAnimation Storyboa rd.Ta rge tName="trans forra" 
Storyboard.TargetProperty="ScaleY" 
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From="l" To= n 2" Duration="0:0:3.07" 
AutoReverse="True" RepeatBehavior="Forever" 
<DoableAnimation Storyboard.TargetName="transform" 
Storyboard.TargetProperty="SkewX" 
From="-30" To="30" Duration="0:0:3.31" 
AutoReverse="True" RepeatBehavior*"Forever" 
<DoubleAnimation Storyboard.TargetName="transform" 
Storyboard.TargetProperty="SkewY" 
From="-30 H To="30" Duration="0:0:3.53" 
AutoReverse="True" RepeatBehavior="Forever" 

</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers 〉 

</Page> 


注意， Grid 还包含蓝色 Polygon 和红色 Path, 但没有实际坐.标点。 

代码隐藏文件使用 Tapped If 件，调用 TransformToVisual , 暂停 Storyboard (冉下次点 
击恢复)，并对 TextBlock 进行“快照”。 TransformToVisual 返回 GeneralTransform 对象来 
描述 TextBlock 和 Grid 的关系。该程序用此來 Polygon 把 TextBlock 的四个角变换为 Grid 
叱标，并围绕着 TextBlock 有效地 !Wi 了一个矩形。 


项 R: WheresMyElement | 文件： MainPage. xaml. cs (>i'©) 
public sealed partial class MainPage : Page 


storyboardPaused; 


public MainPage() 


5.InitializeComponent{); 


protected override void OnTapped(TappedRoutedEventArgs args) 


(storyboardPaused) 


storyboard.Resume(); 
storyboardPaused = false; 





的结果会有所 不同： 描述边界框的矩形， K 宽 1 j 水平和垂肓方 






向平行，并 a 大到足以包含该元索。如 F 图所示。 



很容易通过被变换四个角的 M 大和 坫小的 X 和 Y 少标 it 算得到边界矩形.+过 方便吋 
用是 很好的車情。 

10.15 投影变换 

木章稍前 W 论了为什么在数学 I :把：维图形变换描述为3 X 3矩阵，而且耑要加入第三 
维度。通过类推.三维阁形变换⑴以用 4 X 4 矩阵来表达 ， | fi 〗 Windows Runtime 就有此矩阵。 

Windows . UI . Xaml . Media . Media 3 D 命名空间只包含两 项： Matrix 3 D 结构以及 
Matrix 3 DHelper 前荇所有程序员都能用，而后苦和要针对 C ++ 程序员， 闵为 C ++ 程序 
员不能访问 Matrix 3 D 定义的任何方法。除了矩阵的每-个单元格都可用之外, Matrix 3 D 
的厲性 都类似 ]'• 常规 Matrix 结构。 


MW 

M \2 

M 13 

Am 

A /21 

M 22 

M 23 

M 2 A 

M 3 \ 

A /32 

M 33 

M 34 

OJfsetX 

OffsetY 

OJfsetZ 

M 4 A 


然而，很少行程序员真正深入过该矩阵。大多数程序员部满足丁 -使用 PlaneProjection 
类，而在本章开始我就简要演尔过该类。 

PlaneProjection 的电耍 H 的是让你能够在•:维空间旋转：维元#。•:维空间甩的旋转总 
是绕轴，而 PlaneProjection 能让元 iK •围绕荇水卞 : 轴(使用 RotationX 厲性)、•萌 直轴 (使用 
RotaUonY 属性) 或概念上穿透屏權的 Z 轴而旋转。围绕 Z 轴旋转仅仅是-维旋转，而远没 
有其他两个轴那枰令人印象深刻。 

" J 以预期右手规则旋转的 方向： 把心 T - 拇指朝向 iV . 轴方向，右为 X 轴、卜为 Y 轴，而 
Z 轴是朝屏縣外面 - 手指曲线则表明正向角度的旋转方向。 PlaneProjection 按 X 、 Y 、 Z 的 
顺序应用旋转，但通常 K 使用其中之、 

稍微用一用 PlaneProjection , 就能使元索摇摆进入视图，甚至能从概念 I •.翻 转元#，以 
显示“另一面”(稍后将演示)。 
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接 卜来 是+用 PlaneProjection 的效果。 ThreeDeeSpinningText 程序允许独 ◊ ••对 
RotationX 、 RotationY 和 RotationZ 属性进行动画，在'维空间内旋转 TextBlock 。 如卜 XAML 
文件中， Begin / Stop 和 Play/Pause 一组按钮在结尾。 

项 R: ThreeDeeSpinningText | 义件： MainPage.xaml < 片段） 


<Page ... > 

<Page.Resources 〉 

<Storyboard x:Key="xAxisAnimation" RepeatBehavior="Forever"> 
<DoubleAnimation Storyboard.TargetName="projection" 



</Storyboard> 


<Storyboard x : Key="yAxisAnimation" RepeatBehavior="Forever"> 
<DoubleAnimation Storyboard.TargetName="projection" 

Storyboard.TargetProperty="RotaCionY" 
From="0" To= M 360" Duration-"0:0:3.l ,f /> 



<Storyboard x : Key= n zAxisAnimation" RepeatBehavior= M Forever"> 
<DoubleAnimation Storyboard.TargetName="projection" 

Storyboard.TargetProperty="RotationZ” 
From="0" To= M 360" Duration="0:0:4.3 M /> 

</Storyboard> 

</Page.Resources 〉 


<Grid.RowDefinitions> 

<RowDefinition Height:"*" /> 
<RowDefinition Height-**Auto" /> 
</Grid.RowDefinitions> 


<TextBlock Text="3D-ish n 
FontSize-"384" 

HorizontalAlignment =,, Center" 

VerticalAlignment="Center"> 

<TextBlock.Projection> 

<PlaneProjection x:Name=.’projection’’ /> 
</TextBlock.Projection> 



<! —— Control Panel --> 

<Grid Grid.Row*»"l'* HorizontalAlignment="Center"> 
<Grid•RowDefinitions 〉 


<RowDefinition Height="Auto" /> 
〈RowDefinition Height="Auto" /> 
〈RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 


<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" 
<ColumnDefinition Width="Auto" 


<ColumnDefinition Width="Auto" 
</Grid.ColumnDefinitions> 


/> 

/> 

/> 


<Grid.Resources> 


<Style TargetType="TextBlock"> 

〈Setter Property="FontSize" 

Value-"(StaticResource ControlContentThemeFontSize}" /> 
<Setter Property="VerticalAlignment M Value="Center" /> 

</Style> 


〈Style TargetType="Button"> 

<Setter Property:"Width" Value="120" /> 
<Setter Property-"Margin" Value= M 12" /> 
</Style> 



</Grid.Resources 〉 


<TextBlock 


Axis: " Grid.Rovr 
<isAnimation M /> 


"0" Grid.Column="0 M 


• : "xAxisAr 

<Button Content-"Begin" Grid.Row="0" Grid.Column="1" 
Click="OnBeginStopBucton'' /> 

〈Button Content®"Pause" Grid.Row="0 M Grid.Column*"2" 
IsEnabled-"False" 

Click="OnPauseResumeButton" /> 


<TextBlock Text="Y Axis: •• Grid.Row="l" Grid.Column*"0" 
Tag®"yAxisAnimation" /> 

<Button Content="Begin" Grid.Row="l" Grid.Colunrn="1" 
Click-"OnBeginStopButton" /> 

<Button Content="Pause" Grid.Row" 1" Grid.Colunui="2" 
IsEnabled- n False n 
Click="OnPauseResumeButton" /> 

<TextBlock Text- M Z Axis: ” Grid.Row="2" Grid.Column="0 M 
Tag="zAxisAnimation" /> 

<Button Content="Begin" Grid.Row="2" Grid.Column="1 M 
Click="OnBeginStopButton" /> 

<Button Content-"Pause" Grid.Row»"2" Grid.Column="2 n 
IsEnabled="False" 

Click="OnPauseResumeButton" /> 

</Grid> 

</Grid> 

</Page> 


中.个 DoubleAnimation 对象的持续时间都有一点不同，以避免一起运行时会出现重赵 
模式。代码隐藏文件中的按钮使用 Storyboard 的 Begin 、 Stop , Pause 和 Resume 方法来控 

制行动。 


项 H: ThreeDeeSpinningText I 文件： MainPage. xaml. c 
public sealed partial class MainPage : Page 


public 


void OnBeginStopButton(object sender, RoutedEventArgs args) 

( 

Button btn = sender as Button; 

string key = GetSibling(btn, -1).Tag as string; 

Storyboard storyboard = this.Resources I keyJ as Storyboard; 
Button pauseResumeButton - GetSibling(btn, 1) as Button; 
pauseResumeButton.Content = "Pause"; 


if (btn.Content 


string ** "Begin" 


storyboard.Begin(); 
btn•Content = "Stop"; 
pauseResumeButton.IsEnabled = true; 


storyboard.Stop(); 
btn.Content = "Begin"; 
pauseResumeButton.IsEnabled = false; 


void OnPauseResumeButton(object sender, RoutedEventArgs args) 


Button btn - sender as Button; 



例如 卜图中 的示例图片。 



PlaneProjection 炎有•堆额外厲性 。 CenterOfRotationX 和 CenterOrRotationY M 性的^ 
标都是相对于允素的。默认俏为 0.5, 是元索中心，通常也就是你想要的 。 CenterOmotationZ 
属性以像素为单位，默认值为0,和屏幕表 rfri 相对应。为了内部计算 I I 的，假设“相机”（或 
荇 是你，用户) ft # 屏幕的距离是1000像#,即约10英、 J 。 

PlaneProjection 还为 X 、 Y、Z 维度定义了_ (个 LocalOffset 属性和 1 三个 GlobalOffset 属 
性。这哔部是以 像尜为 中.位的平移因子。 LocalOffset 值在旋转之前应用，而 GlobalOffset 
值在旋转之 / Tf 应用。通常， 需耍设 置 GlobalOffset 属性。 

以 K 有一个“翻转 Ifll 板”的小例子，这项技巧曾经非常难，而乱涉及到真正的 3 D 编 
程。其想法如 K : Ifli 板 I •.冇一些控件粜合，要通过一组不同(但相关)的控件方法来翻转面 
板。在木例中，我用 两个 Grid 血板表示板的汜而和反曲，两个 Grid ifli 板 用小冋 背景颜 
色，每•个都包含 TextBlock 。 
















项 H: TapToFlip I 文件： MainPage.xaml < 片段） 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Grid HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Tapped="OnGridTapped M > 

<Grid Naroe="gridl" 

Background="Cyan" 

Canvas.ZIndex-"l"> 

<TextBlock Text= M Hello" 

HorizontalAlignment="Center" 

FontSize= M 192 n /> 

</Grid> 

<Grid Name*"grid2" 

Background 0 "yellow" 

Canvas.Zlndex="0"> 

<TextBlock Text-"Windows 8" 

FontSize="192" /> 

</Grid> 

<Grid.Projection> 

<PlaneProjection x : Name="projection" /> 

</Grid.Projection 〉 

</Grid> 

</Grid> 

请注总 Canvas . ZIndex 设 S 。 这些设 W 确保 gridl 在视觉上保持 grid 2 上面，即使 gridl 
在其共同父类的子集中较 ¥- 出现。 

Resources 部分包贪两个 Storyboard 定义，一个是翻转，另一个是翻回。 

项 TapToFlip | 文件： MainPage.xaml ( 片段 } 

<Page.Resources> 

<Storyboard x:Key="f 1 ipStoryboard"> 

<DoubleAnimationUsingKeyFrames 

Storyboard.TargetName="projection" 

Storyboard.TargetProperty*"RotationY"> 

<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" /> 

<LinearDoubleKeyFrame KeyTime= M 0:0:0.99" Value*"90" /> 
<DiscreteDoubleKeyFrame KeyTime=«"0:0:1.01" Value="-90 M /> 
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="0" /> 
</DoubleAnimationUsingKeyFrames> 

<DoubleAnimation Storyboard.TargetName="projection" 

Storyboard.TargetProperty="GlobalOffsetZ" 

From="0" To="-1000" Duration«"0:0:1" 

AutoReverse="True" /> 

<0bjectAnimationUsingKeyFrames 

Storyboard.TargetName="gridl" 

Storyboard.TargetProperty="(Canvas.ZIndex)"> 
<DiscreteObjectKeyFrame KeyTime:"0:0:0" Value="l" /> 

<DiscreteObjectKeyFrame KeyTime="0:0:l" Value="0" /> 
</ObjectAnimationUsingKeyFrames> 


<ObjectAnimationUsingKeyFrames 

Storyboard. Ta rge tName=’’gr id2 •• 

S toryboa rd.Ta rget Property="(Canvas.ZIndex) M > 
<DiscreteObjectKeyFrame KeyTinve="0:0:0" Value*"0" /> 
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="l" /> 


</ObjectAnimationUsingKeyFrames> 

</Storyboard> 


〈Storyboard x : Key="flipBackStoryboard"> 

<Doub1eAnimationUsingKeyFrames 

Storyboard.TargetName="projection" 



Storyboard.TargetProperty="RotationY , 
<DiscreteDoubleKeyFrame KeyTime-"0:0:0" Value="0" / 
<LinearDoubleKeyFrame KeyTime="0:0:0.99" Value="-90 
<DiscreteDoubleKeyFrame KeyTime="0:0:1.01" Value="90" /> 
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="0" /> 
</DoubleAnimationUsingKeyFrames> 

<DoubleAnimation Storyboard.TargetName="projection" 


Storyboard.TargetProperty-"GlobalOffsetZ" 



<ObjectAnimationUsingKeyFrames 

Storyboard.TargetName="grid2" 

Storyboard.TargetProperty="(Canvas.ZIndex)"> 
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="l" /> 

<DisereteObjectKeyFrame KeyTime="0:0:1" Value="0" /> 



</Page.Resources 〉 


两个 storyboards 非常相似。两 都包含 DoubleAnimationUsingKeyFrames 以 
PlaneProjection 对象的 RotationY 属性为 H 标。属性从 0 旋转到90度或 -90 度(此时对用户 
成直 角)， 然; Ti 转180度，这样动 W 可以继续在同一方向返回到0。 

同时， GlobalOffsetZ 属性以动幽形式从0旋转到-1000,然后回到0。看起来好像是面 
板掉到了屏幕珩血，以准备执行翻转(也许这样，翻转面板就小会碰到用户的择子)。 

每个 Storyboard 执行到一半的时候，对 Canvas . Zlndex 索引进行交换。 Canvas.ZIndex 
M 性是 ObjectAnimationUsingKeyFrames 的另一个合适 H 标。 

动画由点击触发，而触发由代码隐藏文件 处理： 


项 H: TapToFlip | 义 • 件： MainPage.xaml.cs ( 片段 } 
public sealed partial class MainPage : Page 

Storyboard flipStoryboard, f1ipBackStoryboard; 
bool flipped = false; 




Storyboard storyboard = flipped ? flipBackStoryboard : flipStoryboard; 
storyboard.Begin(); 
flipped true; 





大部分 逻妍的 IJ 的是防止在前一个 Storyboard 尚未结束 时就肩 动 K 一个 Storyboard。 而 
根据 storyboard 定义的方式，则会造成导致中断。（试试从 OnGridTapped 删除 return 语句， 
你会看到令人+满意的结果。>在动画过程中，我宁愿用点击莨接逆转操作，只不过耑要一 
些较复杂的逻辑。 


10.16 推导 Matrix 3 D 


我们来看一些有点难的数学知识，好吗？ 

就象前 ifii# 到的，二维图形耑要 3X3 变换矩阵来进行平移、缩放、旋转和倾斜。从概 
念上讲，点(X， y) 当做好像存在三维空间，平标为(X, y, 1>。 

—般的二维仿射变换应用如 K 所示： 

MW M\2 0 

\x y l|x M2 \ M22 0 =\x y l| 

OffsetX OffsetY 1 

出于此目的，这些是矩阵结构的实阮字段。同定第-列限制为仿射变换。矩阵乘法隐 
含的转换公式为 

x ' = M \\- x + M2\-y + OffsetX 
〆= A/l 2rv + A/22 -少 + OffsetY 

由 T- 是仿射变换，因此正方形总是变换成平行四边形。该平行四边形山三个角定义， 
而第四个角由其他三个角决定。 

是否吋 以推导出仿射变换，能把一个单位正方形映射为•个仟总平行四边形？我们想 
耍的映射如卜所 水： 

(0,0> — (j ： o ， _v 0 ) 

(0,0)^(jt 2 ,y 3 ) 

如果把这些点代入变换公式，很容易得出所需矩阵的以 卜中.儿格： 

A /1 \ = X 2 —X 0 
M \ 2 = y 2 - y 0 
M2 \ = Jt, — x 0 
M22 = y ,- y 0 
OffsetX = x 0 
OffsetY = y 0 

在 3D 图形编程中， 33 要 4X4 变换矩阵，而点 (u,z) 则处现力存在于四维申间，其惭 
标是 1> 。 X 、 少和2之后没有剩余的 7 -母， W 此第四维度通常表达为指 7 •时 M.。 转换 
的应用如 F 所水： 


A/11 

M\2 

A/13 

A/14 

M2 \ 

M22 

M23 

M2A 

M3 \ 

M32 

M33 

A/34 

OffsetX 

OffsetY 

Offset ! 

A/44 
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以 h 为 Matrix 3 D 结构的实际字段。 

所得结果的 4 X 1矩阵通过所有肀标除以 w 变换回三维空间的•个 点： 

卜 ’〆〆 十 

传统 2 D 图形中，通常+希望有被0除的情况。但在 3 D 图形中，被0除的值则是必要 
的，因为透视图就是这样实现的。你想让平行线在无穷远处相遇， W 为那是现实生活中的 
真实情况。 

Windows Runtime 中， Matrix 3 D 结构的唯一 H 的是设 H 为 Matrix 3 DProjection 对象的 
ProjectionMatrix 属性，再町以设 H 为元素的 Projection 属性，以替代 PlaneProjection 。 如以 
下 XAML 所示： 


<Image.Projection> 

<Matrix3DProjection> 

<Matrix3DProjection.ProjectionMatrix> 
100 0 , 010 0 , 001 0 , 000 


</Matrix3DProjection> 
</Image.E 
</Image> 


我们实际能在 XAML M 实例化 Matrix 3 D 值，所以耑要从第一行开始指定组成矩 
阵的16个数字。本例显示了特征对角线为 Is 的单位矩阵。 

在这种坏境下，该 4 X 4 矩阵完全+能使用，因为其应用的元索 为平! fri , Z 喵标为0， 
因此矩阵的应用实际如 F 所示： 




A/ll 

M \2 

A /13 

M\A 

y 0 l|x 

A /21 

M 22 

A /23 

A /24 

M 31 

M 32 

A /33 

A /34 


OffsetX 

OffsetY 

OffsetZ 

A /44 



也就是说，构成整个第三行的申.元格 ( M 3 1、 M 32, M 33 和 M 34 值) 没有关联。它们被 
0乘，因而+进入计算。 

此外，巾该方法得到的 3 D 点在 Z 轴 h 折眘，以获得 2 D 点映射到视频敁氺： 



这也是发牛:在标准 3 D 图形上的过程，但通常涉及到较多 I :作， W 为 Z 值也表明对相 
机来说什么可见、什么被遮挡。 

此外，标准 3 D 图形只保留了 Z 值范围。“附近的平面”和“远处的平而”依照 Z 来 
定义，而只有两个平面之间的嶝标吋见。其余的则直接抛弃， W 为这呰爭标在概念要么 
离相机太近或要么太远。在 Windows Runtime >P., 只保留 Z 值在0和丨之间的平标。为了 
避免失去一部分变换元素， M 13 和 M 23 应该设 S 为0 。 OffsetZ hJ ■以设畀为 Ofll 丨之间的任 
何值，不过将其设1!为0也很方便。 

如果应用 Matrix 3 DProjection 到二维元 粜， 转换公式则如 下： 


x' =M\ 1*jc + M2\-y + OffselX 
y = M\2»x+ M22>y +Offset Y 
w r = M\4-x+ M24»y+ M44 

如果 M14 和 M24 为 0, M44 为 1, 则是一个简申的二维仿射变换。非0值的 M14 和 
M24 是这些公式的非仿射部分。 M44 uj •以是1之外的数，但如果为是0,则总是可以找到 
-个 M44 等于1的等效变换，只需要把所有字段乘以 1/M44。 

在非仿射变换中，正方形不一定要变换 A 平行四边形。然而，非仿射变换仍有局限。 
非仿射变换+能把正方形变换成仟意四边形。变换后的线不能互相交叉，四个角一定要 凸起。 
我们尝试推导一个非仿射变换，能把正方形的四个角映射为任 意点： 

(0,0)^(x o ,7 0 ) 

(0，”-»( W _> 

(1 ， 0)-»(W 2 > 

如果分解成两个变换，练习会更 容易： 

(O,O)^(0,O)-^(x o ,y 0 ) 

(0，l)4(0，l)4( Wl > 

(1,0)-»(1,0)->(a: 3 ,/ 2 ) 

第一个变换 M 然是非仿射变换，我把它称为 B, 第：个变换我们强制成为仿射变换， 
称为 A。 强制为仿射变换的方法是把从 a ^\ b 推导出值。复合变换则为 BX A。 

我己经向你展示了仿射变换的推导，如果从 3X3 矩阵变换到 4X4 矩阵，甚至都+需 
耍改变符号。但我们也希望该仿射变换能把点(《力>映射到任意点 (x 3 乃)。通过应用推导出的 
仿射变换到同时为了解决 a 和6,我们 得到： 

_ M22-x l ~M2\-y } + M2\.OffsetY - Mll.PffsetX 
° MW-M22- M\2-M2\ 

b _M\ Uy } - M12«.y, +A/1 2-OffselY - Ml \-PffsetX 
MU-M22~M\2-M2\ 

现在，我们试试非仿射变换， 需 要能产牛以下 映射： 

( 0 , 0 )-»( 0 , 0 ) 

(0,1)->(0,1) 

0,0)-Kl,0) 

( l , l )-»( a , 6 ) 

以下 是之前的变换 公式： 

•r’= A/l Ux + M2Uy + OffselX 
y" = M\2»x + M22*y OffsetY 
24«v + A/44 

请记住，/和 / 必须 除以* V', 以得到被变换的点。 

如果 (0, 0) 映射到(0, 0), 则 Offsetx 和 OffsetY 为0, M44 为非0。我们来冒 K 险，把 
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M 44 设定为1。 

如果(0, 1) 映射到 (0, 1)，则 M 21 必定为 0( 以计算 x ' 的零 值)， /除以 〆 必定是1，也就 
是说， M 24 等 PM 22 减 

如果(1， 0) 映射到 (1, 0>,则 M 12 为 0( y ’ 的零值)， atI ： 余以 w ' 必定为1，或者说 M 14 等 
于 M 11减1。 

如果(1，1)映射到(仏6)，则能 得到： 


a + b — \ 


a + b — \ 

a 和已经推导过。 

现在来写代码。我想显示由该过程推导出的实际矩阵.这就是名为 DisplayMatriUD 的 
UserContro ! 派牛.的 H 的。 XAML 文件内容要比 4 X 4 Grid 的 TextBlock 元素的多一点。 


项 H: NonAf fineStretch | 文件： DisplayMatrix3D.xaml < 片段> 
<UserControl ... > 

<UserControl.Resources 〉 


<Style TargetType="TextBlock"> 

〈Setter Property="TextAlignment" Value="Right M /> 
〈Setter Property="Margin" Value="6 0" /> 

</Style> 

</UserControl.Resources 〉 


<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush) 
BorderThickness-"1 0 M > 

<Grid> 


<Grid.RowDefinitions> 

<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height=*"Auto" /> 
<RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 


<Grid.ColumnDefinitions 〉 



Definition Width= M Auto" 
Definition Width="Auto" 
Definition Width="Auto" 
Definition Width-"Auto" 


</Grid.ColumnDefinitions> 


/> 

/> 

/> 

/> 


<TextBlock Name="mll" 
<TextBlock Name="ml2" 
<TextBlock Name="ml3" 
<TextBlock Name= M ml4" 


Grid.Row= M 0 M 

Grid.Row="0" 

Grid.Row="0" 

Grid.Row»"0" 


Grid.Column:"0" 
Grid. Column=" 1 •• 
Grid.Column:"2" 
Grid.Column:"3" 


/> 

/> 

/> 

/> 


〈TextBlock Name="m21" 
<TextBlock Name= ,, m22 M 
<TextBlock Name="m23" 
〈TextBlock Name="m24" 


Grid.Row= ,, l" 

Grid.Row="l" 

Grid.Row="l H 

Grid.Row="l" 


Grid.Column="0" /> 
Grid.Column="l" /> 
Grid .Column:" 2 •• /> 
Grid.Column="3" /> 


<TextBlock Name="m31" 
<TextBlock Name="m32" 
<TextBlock Name="m33" 
<TextBlock Name="m34" 


Grid.Row="2" 
Grid.Row= M 2" 
Grid.Row="2" 
Grid. RoW 2" 


Grid.Column="0" /> 
Grid.Column="l" /> 
Grid.Column="2" /> 
Grid.Column="3" /> 


<TextBlock Name="m41" 
〈TextBlock Name="m42" 
<TextBlock Name="m43" 
〈TextBlock Name= M m44" 


Grid.Row="3" 
Grid. Row" 3 M 
Grid.Row="3" 
Grid.Row= ,, 3" 


Grid.Column="0" 
Grid.Column="l" 
Grid.Column:"2" 


/> 

/> 

/> 

/> 



MaCcix3D.OffsetX.ToString("FO") 

Macrix3D.OffsetY.ToString("FO") 

Matrix3D.OffsetZ.ToString( M FO") 


</Border> 

</UserControl> 


代码隐藏文件定义了 Matrix3D 类型的依赖厲性，因此每当该属性发生变化，部会收到 
通知。请 注意： 如果现有 Matrix3D 结构的厲性发生改变，不会产生通知。必须替换整个 
结构。 


項目 ： NC 
public 


ineStretch | 文件： DisplayMatrix3D.xaml .cs (片 段） 
ed partial class DisplayMatrix3D : UserControl 

DependencyProperty matrix3DProperty 二 
apendencyProperty.Register("Matrix3D", 

typeof(Matrix3D), typeof(DisplayMatrix3D), 

new PropertyMetadata(Matrix3D.Identity, OnPropertyChanged>>; 


public DisplayMatrix3D() 


public 


DependencyProperty Matrix3DProperty 


public 


SetValue(Matrix3DProperty, value);) 
return (Matrix3D)GetValue(Matrix3DProperty); 


OnPropertyChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

s DisplayMatrix3D).OnPropertyChanged(args); 
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格式规范的选择祛于这些单元格常见范围内的一点经验。 

MainPage 的 XAML 文件包括 DisplayMatrix3D 控件实例，但也引用我 M 站里的图片, 
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并且用四个 Thumb 控件进行装饰。 Thumb 控 件允许 拖动任意角到任意位 W 。 前缀 ul 、 
11 和 lr 代表 upper-left (左上)、 upper - left (右上)、 lower-left (左下)和 lower - right (右下)。 

项目： NonAffineStretch I 文件： MainPage.xaml < 片段） 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="Thumb M > 

〈Setter Property="Width" Value= M 48" /> 

<Setter Property="Height M Value="48" /> 

<Setter Froperty="HorizontalAligrunent" Value="Left" /> 

〈Setter Property="VerticalAlignment" Value= ,, Top" /> 

</Style> 

</Page.Resources 〉 

<Grid Background*"(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Image Source= M http:"www.charlespetzold.com/pw6/PetzoldJersey. jpg'. 
Stretch="None" 

HorizontalAlignment« M Left" 

VerticalAlignraent="Top"> 

<Image.Proj ection> 

<Matrix3DProjection x:Name- M matrixProjection" /> 

</Image.Projection> 

</Image> 

<Thumb DragOelta-"OnThumbDragDe 11a’• > 

〈 Thumb.RenderTransform 〉 



<TranslateTransform X="-24" Y="-24" /> 

<TranslateTransform x:Name="ulTranslate" X="100" Y="100" /> 



</Thumb.RenderTransform> 

</Thumb> 

<Thumb DragDelta="OnThuinbDragDelta ,, > 

<Thumb.RenderTransform> 

<TransformGroup> 

<TranslateTransform X="-24" Y«"-24 M /> 

<TranslateTransform x:Name="urTranslate" X="420" Y="100" /> 
</TransformGroup> 

</Thumb.RenderTransform> 

</Thumb> 

<Thumb DragDe1ta-"OnThumbDragDe1ta"> 

<Thumb•RenderTransform> 

<Trans formGroup> 

<TranslateTransform X= ,, -24" Y- H -24" /> 

<TranslateTransform x:Name="HTranslate" X= M 100 H Y="500" /> 
</TransformGroup> 

</Thumb.RenderTransform> 

</Thumb> 

<Thumb DragDelta*="OnThumbDragDelta"> 

<Thumb.RenderTrans form> 



<TranslateTransform X="-24" Y= , '-24 , ' /> 

<TranslateTransform x:Name-"lrTranslate" X="420" Y="500" /> 
</Trans formGroup> 

〈 /Thumb•RenderTransform> 

</Thumb> 

<local :DisplayMatrix3D HorizontalAlignment=•• Right" 
VerticalAlignment="Bottom" 



ur 、 



代码隐藏文件实现 r 刚刚向你展尔的数学，只不过需要另一个矩阵把图片的实际大小 
和位胷 映射到中-位正方形。在 CalculateNewTransform 代码中是称为 S 的矩阵。 

项 R: NonAf finest retch I 文件： MainPage.xaml .cs (片段 > 
public sealed partial class MainPage : Page 
( 

// Location and Size of Image with no transform 
Rect imageRect = new RecC(0, 0, 320, 400); 

public MainPage() 



void OnThumbDragDelta(object sender, DragDe1taEventArgs args) 

{ 

Thumb thumb - sender as Thumb; 

TransfomGroup xformGroup = thumb.RenderTransform as TransformGroup; 
TranslateTransform translate = xformGroup.Children 【 l] as TranslateTransform; 
translate.X += args.HorizontalChange; 
translate.Y += args.VerticalChange; 

CalculateNewTransformO; 



// me returned cranstorm maps cne po 
// (0, 1), (1, 0), and (1, 1) to the | 
// ptUL, ptUR, ptLL, and ptLR normali 
static Matrix3D CalculateNewTransform 
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M21 = (ptLL.X - ptUL.X) , 
M22 = (ptLL.Y - ptUL.Y), 



double a = (A.M22 • ptLR.X • A.M21 * ptLR.Y + 
A.M21 * A.OffsetY - A.M22 • A.OffsetX) / den; 
double b = (A.Mil * ptLR.Y - A.M12 * ptLR.X + 
A.M12 * A.OffsetX - A.Mil * A.OffsetY) / den; 


^l.ij J- •.维 Matrix 结构， Matrix3D 结构做的是乘法操作，闽而使数纽操作容易 得多。 
当然.也坷以把拇指拖动到图片消失的位置，因为辛:少有一个角度成 m 行或线条相 K 
交乂。 似在 这些限制条件 F, 确实以把图片拉伸为非仿射形状(如卜'图所示)。 



W . 然.让 Windows Runtime 能应 ffl 锥形变换需要花一些精力，但变形照片会让人们觉 
得很好玩，这种乐趣是对1:作的报偿。 


一1?1; 


55’ 


12 4 4 4 
.Ml.M2.Ml.M2.M4 
BBBBB 



第 11 章三个模板 

“模板” 一词一般指用于创建相同或类似对象的模式或模具。在 Windows Runtime 中， 
模板是一段 XAML , Windows 吋用来创建吋视树元素。肴上去可能没那么惊人。本从第 
一页开始就在讨论 Windows 把 XAML 变为 " J * 视树。但模板几乎总是包含数据绑定，因此， 
单个模板 会产生 许多可视树，并根据绑定来源呈现不同外观。出 T 此原因，模板被经常定 
义为资源，因此可以共享以及多次使用。 

本章标题所指三个模板，分别对应派生自 FrameworkTemplate 的三个类： 

Object 

Dependency Obj ect 

FrameworkTemplate (非 uj * 实 例化） 

DataTemplate 
Control 丁 emplate 
ItemsPanelTemplate 

不能在代码中定义模板，而必须使用 XAML , 也不要期望杳洵 Windows Runtime 文档 
能得到有 关这晖 类的更深层次知识。 DataTemplate 只定义了一个公共方法 ， ControlTemplate 
只定义了一个公共属性，而 ItemsPanelTemplate 只定义自己。与模板类的机制有联系的… 
切东 两几 乎都在 Windows Runtime 内部。 

用 DataTemplate 可以给不一定本来就要有视觉效果的数据对象加1:吋视化外观。我会 
先通过 派生自 ContentControl 的控件来演 / j ) DataTemplate . 但初肴起 来似乎 适用性有限 。 fJI 
DataTemplate 对子展¥集合中 中个条 I 」是必+可少的，这涉及到派牛 .tl ItemsControl 的控 
件。 

通过 ControlTemplate 吋以® 定义标准控件外观，如果要定制应用的可视化效果， 
ControlTemplate 算得 h 是一件强大的工具。 

ItemsPanelTemplate 比其他两个要简中•得多，且只在 ItemsControl 派生类 中发挥作用。 

从对通用丄风的期 M 来看，定义作为 DataTemplate 或者 ControlTemplate —部分的模板 
会很复杂。许多程序员都喜爱 Expression Blend 对设计模板所起到的帮助作用。然而，像往 
常一样，我将演示如何“手工”创建模板。即使还是用 Expression Blend , 你也会更 好现解 
Expression Blend 所生成的 XAML 。 

木章结束时 ， Visual Studio 会生成 StandardStyles . xaml 文件作为标推项 1 1的一部分，而 
你应该完全能理解里面的所有内容。 

11.1 按钮数据 

Windows Runtime 的几种常见元素和控件，可以有吋视化子对象。敁明显的例子是 
Panel , Panel wf 以通过 UIElementCollection 类杷的 Children 属性支持多个子对象 。 Border 



wj 以有一个子对象：其 Child 经常为 UIElement 类甩。如果要创建源自 UserControl 的自定 
义控件，可以把丨』 J * 视树设 W . 为其 Content 属性， Content 厲性也为 UIElement 类喂。 

Button 也有 Content 属性，小过为 Object 类喂。为什么会这样？ 

简而言之，这是因为 Button 派生自 ContentControU 而 ContentControl 定义了 Object 
类型的 Content ： 

Object 

DependencyObject 

UIElement 

F rame work E lement 
Control 

ContentControl 

ButtonBase 

Button 

+过，这真的不算是一个好答案。 

大多数时候，不耑要把 Button 的 Content 属性设置为任何旧对象。大多数时候，•以 
把 Content 属性设 H 为文本，你很吋能会(而乱正确)假定幕后正在创建 TextBlock 用来坫示 
该文本。 

对丁更 漂亮的按钮，町以把 Content 属性设 S 为派牛自 UIElement 的仟何东西。例如， 
如下按钮有一个 tfn 板，包含位图和格式化 文木： 



<Image Source="http : //www.charlespetzold.com/pw6 / PetzoldJersey.jpg" 
Width-"100 w /> 

<TextBlock> 

<Italic>Tap</Italio to shoot the basket 
</TextBlocJc> 

</StackPanel> 

</Button> 

效果如 卜图所 示。 



但如果 Button 的 Content 厲性的确是 Object 类型，则应该吋以将其设芮为非派牛白 
UIElement 的东两。这种情 况卜应 该怎么办？试一试把按钮内容设胃为 LineaKiradientBrush . 
例如： 

<Button HorizontalAlignment-"Center M > 

<LinearGradientBrush> 






〈Gradientstop Offset="0" Color="Red" /> 

<GradientStop Offsets"1" Color="Blue" /> 

</LinearGradientBrush> 

</Button> 

这样做完全合法，即使并+是很消楚你的想法。•般把_笔设 K 为允 桌的+ 同属性(比 
(ill Button 的 Background 或 Foreground 厲性) 以便用不同方 A 进行着色，但 W 笔木身并没有 
任何可视化表示。出于此原因,在按钮上看到的东西为画笔的 ToString 表示。 ToString 会 
返回对某呰类有意义的东叫，似默认实施则直接返回全部合格的类名，如 F 图所示。 



效果不是非常令人满意。 

这个问题是[ I 〗以解决的！ ContentControl +仪 仅定义(而 H. Button lli 继承) Content 属性， 
还有 ContentTemplate 属性。把 ContentTemplate 厲性设置为 DataTemplate 类切的对象，并 
ll ； DataTemplate 甲.定义 "I 视树。 " f 视树通常包含引用对象的绑定，而该对象设 H 为 Content 
属性。 

我们首先來给 Button 的 ContentTemplate 属性添加厲性-元系•标签，并设胃.为 
DataTemplate ： 



〈Gradientstop Offset="0" Color="Red M /> 
<GradientStop Offset="l" Color="Blue" /> 
</LinearGradientBrush> 

<Button.ContentTemplate> 

<DataTemp 丄 ate> 



</Button> 

在 DataTemplate 标签 1, " r 以定义 元系的 可视树，这些元索通过某鸣方法来使用按钮 
内容。我们来试 一 个 Ellipse: 



<LinearGradientBrush> 

<GradientSCop Offset="0" Color="Red" /> 
<GradientStop OffseC="l" Color="Blue" /> 



<Button.ContentTemplate 〉 



Fill*"{Binding} M /> 



</Button> 

注意 Ellipse 的 Fill 属性的 Binding 标记扩展。这种绑定显然非常简单。小需要 Source, 
因为己经把模板的 DataContext 来源设贾为按钮内容。绑定没冇 Path, W 为我们想把 Fill 
厲性直接设 S 为按钮内容。模板会使按钮内容吋见 (见 卜图>。 







把 Ellipse 设 W 为按钮内容和直接在 Fill 属性上定义 LinearGradientBrush , 在视觉 i : 是 
一样的，如下 所示： 

<Button Horizonta1A1ignment="Center"> 

〈Ellipse Width= M 120 M 



<LinearGradientBrush> 

<GradientStop Offset="0" Colors-Red" /> 
<GradientStop Offset="l" Color="Blue" /> 
</LinearGradientBrush> 

々 Ellipse. Fill 〉 



然而，模板 " J 以是柞式的一部分，而多个按钮吋以共享样式，因此，模板方式绝对更 
加灵活和 通用。 

DataTemplate 中的数据绑定+需要像我展示的那样简单。 卜面有 一个更广泛的模板， 
模板在按钮内容 M 引用第二个 GradientStop 对象的 Color 属性，并 H . 通过它来设 S 
SolidColorBrush 的颜色， SolidColorBrush lUijMi 椭 1 M 1 的圆周： 



<DataTemplate> 



〈 Ellipse.Stroke 〉 

<SolidColorBrush Color="{Binding Path=GradientStops 【 11•ColorJ" /> 
</Ellipse.Stroke> 

</Ellipse> 

</DataTemplate> 

</Button.ContentTemplate> 



SolidColorBrush 的 Color 属性的 Binding 使用 Path 来引用 LinearGradientBrush 的 
GradientStops 厲性，即通过索引来获料特定 GradientStop 对象，然后通过 Color 来获得该对 
象 属性： 

《SolidColorBrush Color-"{Binding Path=GradientStops[1].Color} M /> 








DataTemplate 里的 Binding 通常没有 ElementName 或 Source 设 ft ， 因为源作为数据情 
景而提供。 Path 是 Binding 中的第一个(也是 唯一 ) 条目，因此，可以删除 Path = 部分： 

<SolidColorBrush Color="{Binding GradientStops[1J.Color»" /> 

这就是在数据模板 m 几乎总会看到的绑定，效果如卜图所示。 


当然，模板要依赖 LinearGradientBrush 内容。如果没有，绑定则不起作 ffl 。 
HJ + 以在 (或其他 XAML 文件)的 Resources 节定义 DataTemplate ： 

<Page.Resources 〉 

<DataTemplate x:Key« n ellipseTemplace"> 

〈Ellipse Width= M 120" 



Fill •" 丨 Binding I" 

StrokeThickness="6"> 

〈 Ellipse.Stroke 〉 

<SolidColorBrush Color="{Binding GradientStops[1J.Color}" /> 
〈 /Ellipse.Stroke 〉 



</Page.Resources> 

在按钮中引用该模板，则只需要标准 StaticResource 标记 扩展: 

〈Button HorizontalAlignment="Center" 

ContentTemplate= M (StaticResource ellipseTemplate}"> 



<GradientStop Offset="0" Color= n Red M /> 
<GradientStop Offsets"1" Color- H Blue" /> 



</Bucton> 

多个按钮(或其他 ContentComrol 派生类)可以共享模板。通常不能共享对视树，因为吋 
视化元素+能有多个父类。但该模板的工作方式完全不同。共享模板的时候，吋用来为每 
个引用该模板的控件生成一个唯一的可视树。如果有100个按钮把 ContentTemplate 属性设 
胥为该 模板，则会创建100个 Ellipse 元素。 

通常在 Style 中定义模板，以便町以同时把其他属性应用到控件上.。 
SharedStyleWithDataTemplate 项 IJ 在页 jftj 的 Resources 竹定义 —/ 一个隐 成样 式。 

项 SharedStyleWithDataTemplate I 文件： MainPage.xaml ( 片段） 



<Style TargetType="Button M > 

<Setter Property="HorizontaIAlignment" Value="Center" /> 
<Setter Property="VerticalA1ignment" Value="Center" /> 

<Setter Property="ContentTemplate M > 






<Ellipse Width="144" 



Fill="(Binding}" /> 



</Setter> 

</Style> 

</Page.Resources 〉 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrushJ H > 
<Grid.ColumnDefinitions> 



<SolidColorBrush Color="Green" /> 
</Button> 



</Button> 

</Grid> 

</Page> 


该隐式样式 & 动设 S 每个 Button 的属性，包括 ContentTemplate 属性。而单个按钮要 
做的事情是定义 Brush 派牛.类作为 内容： 



模板通过普通数据绑定以引 ffl 对象，因此，如果源对象实施了通知机制（如 
INotifyPropertyChanged), 则会 0 动史新视觉效果。例如，假设创述 Clock 类，该类使用 
ConipositionTarget.Rfndering 游件来获収当前时间，并设肾4属性，每•个 K 件都会触发 
PropertyChanged 件。 


项 R: ClockButton | 文件： Clock.cs 
using System; 

using Systern.ComponentModel; 










using System.Runtime.CompilerServices; 
using Windows.UI.Xaml.Media; 

namespace ClockButton 


public class Clock : INotifyPropertyChanged 
( 

bool isEnabled; 

int hour, minute, second; 

int hourAngle, minuteAngle, secondAngle; 

public event PropertyChangedEventHandler PropertyChanged; 

public bool IsEnabled 

( 

set 

i 

if (SetProperty<bool>(ref isEnabled, value, "IsEnabled")) 

( 

if (isEnabled) 

CanpositionTarget.Rendering +«= OnCompositionTargetBendering; 

else 

CccrposiCionTarget. Render ing -=* OnCc*n»sitionTarge tBender ing ; 

) 

) 

get 

{ 

return isEnabled; 

} 

public int Hour 


SetProperty<int>(ref hour, value);) 
return hour;) 







DateTime 


this.Hour = dateTime.Hour; 
this.Minute = dateTime.Minute; 
this.Second = dateTime.Second; 

this.HourAngle = 30 * dateTime.Hour + dateTime.Minute / 2; 

this.MinuteAngle = 6 * dateTime.Minute + dateTime.Second / 10; 

this.SecondAngle = 6 • dateTime.Second + dateTime.Millisecond / 166; 


protected bool SetProperty<T>(ref T storage, T value, 

(CallerMemberName) string propertyName = null) 


if (object.Equals(storage, value)) 
return false; 


storage = value; 

OnPropertyChanged(propertyName); 
return true; 


protected virtual void OnPropertyChanged(string propertyName) 

{ 

if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 


可以把该类实例设胃为 Button 内容并通过 DataTemplate 来定义如何渲染该对象。 

项 ClockButton I MainPage.xaml ( 片段） 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Button HorizontalAlignment="Center" 

VerticalAlignment="Center"> 

<local:Clock IsEnabled="True" /> 


<Button.ContentTemplate> 

<DataTemplate> 

〈Grid Width="144" Height="144"> 
<Grid.Resources 〉 


〈Style TargetType="Polyline"> 


<Setter 

</Style> 

</Grid.Resources> 


ty="Stroke" 

{StaticBesource /^plicationEbregroundlhan^rush}" /> 


〈Polyline Points="72 80, 72 24" 

StrokeThickness="6 M > 

<Polyline.RenderTransform> 

<RotateTransform Angle* 8 " {Binding HourAngle} 
CenterX="72" 

CenterY-"72" /> 

</Polyline.RenderTransform> 

〈 /Polyline 〉 


〈Polyline Points="72 88, 72 12" 

SCroJceThickness="3"> 

<Polyline.RenderTrans form> 

<RotateTransform Angle="(Binding MinuteAngle) 


Cei 

Cei 
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<Polyline.RenderTransform> 

<RotateTransform Angle="{Binding SecondAngle} 



</Polyline.RenderTransform> 



注意，我在 DataTemplate 的可视树中给 Polyline 定义了隐式 Style 。 这会应用于该可视 
树 1 TI 所有 Polyline 元素。这些 Polyline 元素会将其 RenderTransform 属性设 S 为 
RotateTransform , 而 RotateTransform 的 Angle 则受限 P Clock 类的4〈同属性。三个 Polyline 
元素共同构成了-•个原始时钟，彳4加 h 有完整功能 Button 的一部分，就能指示时间(见下图)。 



记住，设寶为 Button 的 ContentTemplate 属性的 DalaTemplate 只定义/按钮内容的外 
观，而没有定义按钮的镶边。按钮仍然有矩形边界，例如，（在黑色主题中)鼠标经过时， 
仍然会有灰色外观，而点击按钮，按钮则会爭现 h 色背景。要改变按钮外观的这些方血_耑 
要把 ControlTemplate 对象设 S 为按钮的 Template 属性，本章稍后会进行 i 、 J ■论。 

. 11.2 决 策 

XAML 并不是真正的编程语言， W 为它没有循环和 if 语句。 XAML 没有决策能力，因 
此+能包含条件执行的标记块。 

但我们试一试 总是吋 以的。 

我们要在前面项目中 Clock 类的基础 h 进行扩展，让时钟能够区分匕午和 卜午。 要做 
到这一点，我们耍从 Clock 类中派生新类，同时带有一个新属性，命名为 Ho U rl 2, 范_从 
1到12。我们还会赋 I "'新类一对 Boolean 属性，命名为 IsAm 和 IsPm , 我们希犁通过这些 
属性可以根据值来敁示一点点不同的内容。 

ConditionalClockButton 项 U 包 A —个到 ClockButton 项 Clock.cs 文件的链接，并 







幸运的是，我在 Clock 中定义 f OnPropertyChanged 方法，因此，新类■以覆写该方法， 
并检査 propertyName 参数是否等】• “ Hour ” 。如果等 JS 则设 腎所钌 三个新^性，这些厲 
性也会调用 SetProperty ， 闵此 ， OnPropertyChanged 会触发 tl 身的 PropertyChanged #件。 

假设你想要•个按钮，按钮上写符： “ It ’ s after 9 in the morning ” 或 “ It ’ s after 3 in the 
afternoon ” 。以卜 ' TwelveHourClock 类就有你需耍的所有信息，吋以这样幵始定义 按钮： 

<Button> 

<local:TwelveHourClock /> 


<Button.ContentTempiate> 

<DataTemplate> 

<StackPanel Orientation= M Horizontal w > 

<TextBlock Text="It，s after&#x00A0;" /> 
<TextBlock Text="(Binding Hourl2} M /> 
<TextBlock Text*" o'clock" /> 

<TextBlock Text-" in the morning!" /> 
<TextBlock Text=" in the afternoon!" /> 
</StackPanel> 

</DataTemplace> 





</Button> 


然而，需耍禁 ihM / T ； •两个 TextBlock 元素中的一个。只有当 lsAm M 性为 true 时，其中 
第一个才显示,而只有当 IsPm 属性是 true 时,第二个才显示。你会记得，元素有 Visibility 
厲性，可以设置力 Visibility 枚举项， Visible 或 Collapsed 都吋以。如果有方法可以把 
TwelveHourClock 布尔耶属性转换为 Visibility 枚平项，那就人好 

第4章已经介绍过绑定转换器，而最受欢迎的绑定转换器之一通常被命名为 
BooleanToVisibilityConvertero ―贵实 t _:， 如果在 Visual Studio M 创建 Grid App 或者 Split App 
类型的项 H , 则 || 了以在 Common 文件夹中免费获得那些转换器，但写一个也并不 闲难： 

项 H: ConditionalClockButton | 文件： BooleanToVisibilityConverter.cs 

using System; 

using Windows . UI .Xaml; 

using Windows.UI. Xaml.Data; 


namespace ConditionalClockButton 



Visual Studio 生成的版本耍复杂 一些： 检汽 value 参数是被实私抛出的类墦。但如果要 
限制转换器对某些特定标 ill 的使用，则吋以放宽类喂检杏。以下程序当然有限制使用的情 
况，转换器是在模板的 Resources 传、而不是在 Page 的 Resources 节进行实例化。 


顶 H: ConditionalClockButton | 文件： MainPage.xaml ( 片段） 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 
<Button HorizontalAlignment»"Center" 

VerticalAlignment="Cent:er" 



<DataTemplate> 

<StackPanel Orientation="Horizontal"> 




1 .Resources> 




1 :BooleanToVisibilityConverter x:Key="booleanToVisibility" /> 
iel.Resources> 



〈TextBlock 


</StackPanel> 
</Da taTemplate> 



Converter {StaticResource booleanToVisibiiity) 
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</Button.ContentTemplate> 

</Button> 

</Grid> 

A4 后两个 TextBlock 的 Visibility 厲性现在受限 TwelveHourClock 的 IsAm 和 IsPm 厲 
性，而 BooleanToVisibililyConverter 则决定哪一项 "J* 见，从下图可以看出。 



11.3 集合控件和实际使用 DataTemplate 

我演 /j; • 了如何通过派 ContentControl 的代表类来使用 DataTemplate , 似这种类没有 
那么多，老实说，通过这些类来使用 DataTemplate 也并不常见。 

实际使用 DataTemplate 是通过派生 tJ ItemsControl 的控件，这些控件保存通常为相同 
类型的对象 集合： 

Object 

DependencyObject 

UIElement 

FrameworkElement 

Control 

ItemsControl 

Selector ( 非可实 例化 ) 

ComboBox 

FlipView 

ListBox 

ListViewBase ( 非可实例化 ) 

GridView 

ListView 

当然，其中 ib! [ 著名的是 ListBox, ListBox 从 Windows 最幵始的时候就存在(以一种形式 
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或者另一种形 A )。 典喂 ListBox •为一个竖向的列表，用户以使用键盘或鼠标进行滚 
动和选择。(现代 ListBox 则吏灵活,能进行触控操作。 ) Windows 后来出现了 ComboBox ， 
因组 合文木编辑字段和 卜拉 列表而得名。 HipView 是 Windows 8的控件。 

GridView 和 ListView 比其他控件史复杂，我们把它们留到第12章进行讨论。 

处现这些不同控件时，很容易忽视 ItemsComrol 本身，然而，其他所有控件都是 lh 其 
派生而来的。 ltemsControl 只为城4的 IJ 而条14集合，并没有选择的概念。 Selector 类 
添加选择逻辑，其他所有其他类 III 此派牛 .而来。我一般把幣个控件纽称为条 II 控件。它们 
显示了条 U 集合。 

M 过 F 列四种方法之一可以把对象 放入条 U 控件：中独在 XAML 屮、中•独在代码中、 
在散装代码中以及在散装 XMAL 中，而 R 通常使用数据绑定。能 放入条 II 控件的对象通常 
不是派生 tl UlElemento 这些条 UM 常是业务对象或视图模彻。 

对丁•简短的列表. uj •以在 XAML 文件进行 指定： 


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 
<ItemsControl FontSize="24"> 


<x:String>One potato</x:String> 
<x:String>Two potato</x : String> 

<x : String>Three potato</x : String> 
<x:String>Four</x:String> 


<x:String>Five potato</x:String> 
<x:String>Six potato</x:String> 
<x:String>Seven potaco</x : String> 
<x:String>Mor 
</ItemsControl> 


ore</x:String> 


ItemsControl 的内容属性是 Items ， 即 ItemCollection 炎:切的对象，该类实施 IList 、 
I Enumerable 和 I Observable V ector <,(稍 将进-步 I 寸论 这鸣接 I 」）。 

添加到 ItemsControl 的条 I 丨为 String 类型的对象，闵此可以 V ./ ji 为文本(见卜图)。 



ItemsControl 的这种特定使用并+ 见得就 比 Stack Panel 好出很多 ，除 f 4以 )1] String 类 
型的条 1 1而+是用 TextBlock 进行 填充。 当然， 为每一项牛成 TextBlocko 

小同于派牛 ItemsControl 的控件， ItemsControl 自身并没有内肾滚动功能。如果志耍 
滚动--堆条目,你会想把 ItemsControl 放在 ScrollViewer 里,如下 所示: 
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<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 
<ScrollViewer> 

<ItemsControl FontSize="24"> 

<Color>A1iceBlue</Color> 

<Color>AntiqueWhite</Color> 

<Color>Aqua</Color> 


<Color>WhiteSmoke</Color> 

<Color>Yellow</Color> 



列表 " r 以滚动，但并不是十分有用，因为每个 Color 项部用其 ToString 表水来(见 
卜图 )。 



允 论何时肴见条 Id 控件有类咽名称列表.都不耍祀心！如果肴到绑定生效，实& h 应 
该丨分 高兴才是，因 为这总 味着可以更好 地显水 这些条要渲染这些项，就要把 

ItemsControl 的 ItemTemplate 厲性设贸为 DataTemplate 绑定： 


<Grid Background-'* {StaticResource ApplicationPageBackgroundThemeBrush}"> 



<ItemsControl> 

<ItemsControl.ItemTemplate> 
<DataTemplate> 

〈Rectangle Width:"144" 



<Rectangle.Fill> 



</DataTemplate> 

</ItemsControl.ItemTemplate> 


Color=" [ Binding) 


<Color>AliceBlue</Color> 
<Color>AntiqueWhite</Color> 
<Color>Aqua</Color> 
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<Color>Yellow</Color> 


</It 



</ScrollViewer> 


</Grid> 


ItemsControl 的 ItemTemplate W 性炎似丁 - ContentControl 的 ContentTemplate M 性。两 
者都是 DataTemplate 类呢。然而 . 通过 ItemTemplate 厲性， 模板能为奸•条 I — Fk 成 u ] ■视树„ 
效果如 K 图所示。 



构造 ItemsControl 的时候， DataTemplate 用于生成 141 个 Rectangle 元系 • 和 141 个 
SolidColorBrush 对象，每 个 对应着 控件的每一个条 tl 。 

当然，你町能小想在 XAML 文件中有一个含有141个 Color 条 |_1 的整个列表。你叫能 
只想在代码中生成。在 Colorhems 项 U 呎， XAML 文件不包含任何条 1 1,却有一个更精巧 
的模板，它也 M 示了颜色组件。 

项 R: Color Items | 义忭： MainPage.xaml (厂|段> 

<Grid Background=*' {StacicResource ApplicationPageBackgroundThemeBrushl"> 

<ScrollViewer〉 

<ItemsControl Name="itemsControl w 
FontSize="24"> 

<ItemsControl.ItemTemplate〉 

<DataTemplatQ> 

<Grid Width="240" 

Margin="0 12"> 

<Grid.ColumnDefinitions〉 

<ColumnDefinition Width="144" /> 

<ColumnDefinition Width="Auto" /> 

〈/Grid.ColumnDefinitions〉 

<Grid.RowDefinitions> 

RowDefinition Height="Auto" /> 

<RowDefinition Height= M Auto" /> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height="Auto" /> 

</Grid.RowDefinitions> 

<Rectangle Grid.Column="0" 

Gric3.Row="0" 





Grid.RowSpan="4" 

Margin= M 12 0"> 

〈 Rectangle.Fill 〉 

<SolidColorBrush Color="(Binding)" /> 
</Rectangle.Fill> 

</Rectangle> 

〈StackPanel Grid.Column:"1" 

Grid.Row="0 M 

Orientation="Horizontal"> 
<TextBlock Text="A =&#xOOAO;" /> 
<TextBlock Text="{Binding A}" /> 
</StackPanel> 

<StackPanel Grid.Column*"1" 

Grid.Row="l" 

Orientation="Horizontal"> 
<TextBlock Text="R =&#x00A0; n /> 
<TextBlock Text="(Binding R}" /> 
</StackPanel> 

<StackPanel Grid.Coiumn="l" 

Grid.Row= M 2" 

Orientation="Horizontal"> 
<TextBlock Text="G =&#x00A0;" /> 
<TexCBlock Text="{Binding G}" /> 
</StackPanel> 

<StackPanel Grid.Column:"1" 

Grid.Row="3" 

Orientation="Horizontal"> 
CTextBlock Text="B =&#xOOAO; n /> 
<TexCBlock Text="{Binding B)" /> 



</ScrollViewer> 

</Grid> 

条 0 本身在代码中生成。正如现在你会期望的，代码隐藏文件通过反射来获取 rti 静态 
Colors 类所定义的所冇 Color 属性。通过 itl ItemCollection 所定义的 Add 方法，将毎个 Color 
值添加到 ItemsControlo 以下代码展示了把条 H 放条 I I 控件的第 . 种方法。 

项 H: Colorltems | 文件： MainPage.xaml < 片段） 
public MainPage() 


this.InitializeComponent(); 



Color clr = (Color)property.GetValue(null); 
itemsControl.Items.Add(clr); 


现 •: 我们就得到了 丨进制 值显小 • 的每种颜色 ( 见卜阁)。 
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不幸的是，我们+能使用相同方法来敁示每个颜色的名字，因为这+是 Color 结构的 
—部分。如果想要随着颜色而显示名称，需要用提供该名称的类的实例来填充 ItemsControlc 

项 R: PetzoId. ProgrammingWindows6. Chapter 1 1 | 文件： NamedColor.es (片 段} 
public class NamedColor 



List<NamedColor> colorList = new List<NamedColor>(); 

IEnumerable<PropertyInfo> properties = typeof(Colors).GecTypelnfoO.DeclaredProperties; 



Name = property.Name, 

Color = (Color)property.GetValue(null) 



public static IEnumerable<NamedColor> All { private set; get;) 
public string Name { private set; get;) 
public Color Color { private set; get; I 

NamedColor 类有两个公共属性： string 类吧的 Name 属性、 Color 类別的 Color 性。 
NamedColor 类还定义了 lEnumerable〈NamedColor > 类型的静态屈性，称力 All 。 静态构造 
函数把 M 性设胃 . 为 [h 所 fj'NamedColor 对象组成的集合，而 NamedColor 对象通过静态 Colors 
类反射获取。 

我没有把 NamedColor 类定义为实施 INotifyProperlyChanged, W 为 fT : 何 NamedColor 
对象的 厲性在 对象初始化； T ； • 没有改变。 
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为了显 示 丨六 进制 的颜色值， Petzold.ProgrammingWindows6.Chapterl 1庫还包食/ 
ByteToHexStringConverter ： 

项 H: Petzold.ProgrammingWindows6.Chapter 11 I 文件： ByteToHexStringConverter.es 
using System; 

using Windows.UI.Xaml.Data; 

namespace Petzold.ProgrammingWindows6.Chapter11 

i 

public class ByteToHexStringConverter : IValueConverter 

( 

public object Convert (object value. Type targetType, object parameter, string language) 

( 

return ((byte)value).ToString("X2 ")； 

) 

public object ConvercBack (object value. Type targetType, object parameter, string lang) 

( 

return value; 


W 木章剩余部分的许多项 II 一 ft, ColorltemsSource 解决方案包含到该庳项 1 1 的一个链 
接： 对 T- Visual Studio 1 的 ColorltemsSource 解决方案，我右击解决方案资源管理器哏的 
解决方法名称，并选择 “ 添加 ” 和 “ 现有项目”。我导航到了 
Petzold.ProgrammingWindows6.Chapterl 1 .esproj 文件。我冉定义了一个对该项 U 的引用：心 
击 ColorltemsSource 项目下的 “ 引用”，并且在 “ 引用管理器 ” 对话框中选择左边的“项 
II" 和右边的库。 MainPage.xaml 包含一个库声明的 XML 命名 空间 : 

xmlns:chll="using:Petzold.ProgrammingWindows6.Chapterll" 

MainPage.xaml.es 文件包含该命名空间的 using 指令： 

using Petzold.ProgrammingWindows6.Chapter11; 

项 II 之所以称力 ColorltemsSource ， 是 W 为我 lL 经展示了如何川 XAML 或代码 i 方问 
ItemsControl 的 Items 厲性来填充 ItemCollection 对象。 KT 特代的方法是 ItemsSource 属性。 
该诚性定义为 object 类印，但毫 尤疑问 你会把 ItemsSource 设 S 为能实现 I Enumerable 接口 
的东卩 4 。设 W. 为 ItemsSource 的对象变成了 ItemsControl 染合，此时的 hems 性为只读。 

wj 以从代码或 XAML 中设筲 ItemsSource 属性。我先展 示代 码方法。以 K XAML 文件 
中，大部分内 W 是 DataTemplate ， 为集合 K 的毎一个 NamedColor 条 L1 定义 "I 视树。 

项 R: ColorltemsSource | 义件： MainPage.xaml { 片段 > 

<Page ... 

xmlns : chll="using:Petzold.ProgrammingWindows6.Chapterll" 

… > 

<Page.Resources 〉 

<chl1 : ByteToHexStringConverter x : Key="byteToHexString" /> 

</Page.Resources 〉 

<Grid Background-"(StaticResource ApplicationPageBackgroundThemeBrush) H > 
<ScrollViewer> • 

<ItemsControl Name-"itemsContro1"> 




> f% «jT. *. fT~ 

< ^S__ 


<ColumnDefinition Width- 
</Grid.ColunmDefinitions> 





Converter:{StaticResource 

byteToHexStringM" /> 

</StackPanel> 

</ContentControl> 

</StackPanel> 

</Grid> 

</Border> 

</DataTemplate> 

</ItemsControl.ItemTemplate> 

</ItemsControl> 

</ScrollViewer> 

</Grid> 

</Page> 


注怠 Color 组件的 7 个 TextBlock 元素。这鵠素都在一个横向 StackPanel 内，而 
StackPanel 在 ContentControl 内 。 ContentControl 存在的唯一原因是提供 7 个 TextBlock 元素 
所继承的 FontSize 。 隐式 Style 也会很好地发挥作用。 

SolidColorBrush 和 TextBlock 元索的 绑定明 显暗示 iH 在、 1 oi/f NamedColor 类切的对象， 
但在 XAML 文件中，没有实例化 NamedColor 对象。而 ItemsControl 的 ItemsSource M 性在 
代码隐藏文件的构造函数中进行设腎。 


项 H: Color I temsSour ce | 义件： MainPage.xaml.c 
public MainPage() 


this•InitializeComponent<>; 
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设冒.好了 ItemsSource ， ItemsControl 即对集合里的所有条 I 」生成吋视树 ( 见卜阁)。 



还可以把 ItemsSource 属性绑定到集合来实施一个 XAML 解决方案。 
ColodtemsSourceWithBinding 项 LI 非常类似于 ColorltemsSource 项 1 1 ，也使 
Petzold.ProgrammingWindows6.Chapterl 丨库，同时在 XAML 文件屮定义相同 DataTemplate 。 
但 NamedColor 对象被实例化为资源，到 All 属性的绑定是在 ItemsControl 的 ItemsSource 
属性里定义的。 


项 ri: Color I temsSourceWithBinding | 义件： MainPage.xaml (iVBt) 

<Page ... 

xmlns:chll="using:Petzold.PrograiraningWindows 6.Chapter11" 

... > 

<Page.Resources 〉 

<chll : NamedColor x : Key="namedColor" /> 

<chl1 : ByteToHexStringConverter x : Key="byteToHexString" /> 
</Page.Resources 〉 


<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 
<ScrollViewer> 

<ItemsControl ItemsSource="{Binding Source=1StaticResource namedColor J , 

Path-All 



</DataTemplate> 
</ItemsControl.ItemTemplate> 
</ItemsControl> 

</ScrollViewer> 

</Grid> 

</Page> 


如果资源木身是集合对象，则 "J* 以把 ItemsSource 设胥为资源的 StaticResourc 标 iQ 扩展， 
但山 r 只能从 NamedColor 的 All 厲性访 |V 彳 集合，因此需耍 Binding 标记扩展以引用 
NamedColor 对象和 All 属性。 

还记得第 4 章有两个程序吧！它们用小同的方法砧氺颜色列表，我说过耍等到第 11 章 
才能看到最佳方式。现在是时候了。类定义你想 M 示的条目类型，而 ItemsControl I ••的 
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DataTemplate 则定义要清染的条 I 」。 

这就是结合使用集合、绑定和模板的情况，代表 Windows Runtime 程序设计的木质。 

11.4 集合和接口 

在正常怙况卜，构造 NamedColor 类的时候，我会把实例构造函数定义为 protected 或 
private . 因为对单个 NamedColor 而言，类的外部实例化并不是非常合理 。 ColorltemsSource 
项 U 这么做能'及押作用，但 ColorltemsSourceWithBinding 就不能这么做。 / ii 第二个程序 1 P .， 
NamedColor 需要一个公共无参数构造函数，因为必须在 XAML 中实例化类为资源。否则 
无法使用该特定 NamedColor 实例，提供一种方法在后台去访问静态 All 厲性。在大部分程 
序中， iij •能有一个实例化 r 一次的视图模型类(称为中.例模式)，它提供 T 特定集合的实例 
属性。（下一章将定义此类。） 

在 NamedColor 电，我迮定义 All 属性的类型时是冇选择余地的。我本吋以把它定义为 
它本来的 样子： Li S t < N a medColor >。 我也可以通过另一个极端方式将其定义为对象。这都 
+是问题。如果设置好了条0控件的 ItemsSource M 性，控件自己就会检杏设 S 为 
ItemsSource 的对象是否实现了 ( Enumerable . 这就可以访问集合中的实际条 M 。这就是我 
为什么把属性定义力 lEnumerable < NamedColor ；^^: l 天 I 。无论后来我怎么改变 NamedColor 
类的内部.我郤知道属性总能实施 lEnumerable , 因为它必须为条 H 控件提供合适的集合源。 

如果你开始阅读集合和接口文档，很容易产生困惑。 . NET 程序员吋以识別出 
System . Collections.Generic 命名空间甲:定义的 IEnumerable < T > 接口。情况卜，该接 
口称力 llterable < T > ，由 Windows . Foundations.Collections 命名空间定义。这是同一个接口， 
但 C # 和 Visual Basic 程序员将其称为1 Enumerable , C ++ 程序员使用的则是 IUerable 。 

C # 和 Visual Basic 程序员也习惯了处理两种基本集合 类型： List < T > (即 T 类喂对象的有 
序 集合) 和 Dictionary ^ nCey / rValue 〉 (即唯一的非空键和相应值的有序集 合)。 然而， C ++ 程 
序员知道这两种基本类型集合的名字为 vector 和 map 。出于此原因， 
Windows . Foundations.Collections 命名空间包含 1\^(：101<1'>和 lMap < K , V ： H ^ 口，似 C # 和 
Visual Basic 程序员把这些接口看成 lList < T>^l lDictionary < TKey , TValue >. 两荇部在 
System . Collections.Generic 甩进行定义。 

如果就记住 “ vector 是列表，而 map 是字！ T ’， 自然会少一点困惑。 

你 1_1 •经熟悉了 System.ComponentModel 里定义的 INotifyPropertyChanged 接口。 （ C ++ 
程序 W 使用相同的名称接口， 小过由 Windows . UI . Xaml . Data 定义。}如果把一个集合中的条 
目设置为 ItemsSource ， 条0实施了 INotifyPropertyChanged 接口，条13属性的任何变化都 
将反映到绑定 到这些 属性的 NJ " 视化元索上。换句话说， DataTemplate 矾的绑定能响应属性 
变化。这一点你在 ClockButton 项13中 Clock 类型的单一条14里看到过。它也能处理集合项， 
洋见下一章的讨论。 

处理集合和条目控件时，还有一个重要接口叫 INotifyCollectionChanged ,它由 
System . Collections.Specialized 定义。该接口定义 CollectionChanged 事件，如果条 13自身发 
生变化时，也就是说，集合中的条 II 增加、刪除或電排序时，即被触发。如果设置为条 LI 
控件的 ItemsSource 属性的集合实施了 INotifyCollectionChanged . 条 II 控件就会知道这鸣变 
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化并从显示中自动增加或删除条目。 

对于 C # 程序员， ObservableCollection < T > 类实施 INotifyCollectionChangedo 

11.5 轻击和选择 

在 ColorltemsSource 和 ColorltemsSourceWithBinding 这两个项日中，神一项的视觉效 
果都由 DataTemplate 定义，但并不禁 lh 从中个 项中获得输入事件。在 ColodtemsSource 或 
ColorltemsSourceWithBinding 中，启用 DataTemplate 的 Border 非空背景，并且定义 Tapped 
货件的处理 程序： 



Background:"(StaticResource ApplicationPageBackgroundThemeBrush)" 
Tapped="OnItemTapped"> 


这将为 144 个 Border 元素中的毎一个指定同一个 Tapped 处理程序。在处理程序中， 
sender 参数为 Border , 电件参数的 OriginalSource 属性吋以是 Border 或模板喂的另一个元 
袭。无论如何，元素的 DataContext 都是关联到该项的特定 NamedColor 对象，也就是说， 
吋以提取 Color 值并用于对背景进行 着色： 

void OnltemTapped(object sender, TappedRoutedEventArgs args) 

{ 

object dataContext = (args.OriginalSource as FrameworkElement).DataContext; 

Color clr = (dataContext as NamedColor).Color; 

(this.Content as Grid).Background = new SolidColorBrush(clr); 

) 

轻击 Brown 项时的结果，如卜图所示。 



考虑到 wf 以很容易在 ItemsControl 驭实现轻击或#点击界面，你吋能想知道为什么需 
要派生自 Selector 的控件，尤其是 ListBox 。 

有一个 简申的回答： 轻击不是选择。如果选抻 ListBox 中的一顶，该项就会有+同的 
视觉外观。此外，使用键盘 h 的方向键可以移动选项。如果这些都不是你需耍的， 
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ItemsControl W . 然就是令人满总的解决方案。 

为 f 表明当前所选项， Selector 定义了三种+同(但 M 然相关)的属性。 

• Selectedlndex . 所选项在集合中的索引.如果当前没有选择项目，则为-1。 

. Selectedltem , 所选项自身，如果当前没有选择项 B , 则为 null 。 

• SelectedValue . 通常为所选项的属性值，用 SelectedValuePath 表（稍后有吏多 
讨 论。） 

如果 Selectedlndex 不是 - 1，贝 ij Selectedltem 和用 Selectedlndex 索引 Items 属性所得到 
的就是同一个对象。所有这些 厲性能 通过编程或在 XAML 中进行设贾。如果 ListBox 首先 
用条目进行填充,则其 Selectedlndex 为 -1, 而 Selectedltem 将为 null , 直到这些属性明确 
改变或寅到用户用手指或鼠标选抒-项。 

Selector 定义选择变化时会触发的 SelectionChanged If 件，然) fi 处理程序通过 这鸣 属性 
之一获取所选项。 

Selectedltem 由依赖 M 性支持，也就是说，吋以是数据绑定的0标，但在更常用的情况 
卜 '是被用作绑定源。 SimpleListBox 项 I 』使用 NamedColor . AU 作为 Items JS 性的绑定源 ，但 
没有定义模板。相反，项目使用小同的方法来 M 示条 U 。 


顶 H: SimpleListBox | 义件 ： Main Page • xaml < 片段 ) 



ItemsSource="{Binding Source=(StaticResource namedColor), 
Path=Alir 

DisplayMemberPath="Name" 

Width="288" 

HorizontalAIignment* w Center" /> 

<Grid. Background 

<SolidColorBrush Color="(Binding ElementName=lstbox, 

Path=SelectedItem.Color >" /> 

</Grid•Background 〉 

</Grid> 

</Page> 


ListBox 包含自身的 ScrollViewer . 但往往会试图占据尽可能多的屏辂空间，+宵 
HorizontalAlignment 和 VerticalAlignment 的设置如何。你可能想给 ListBox 賦予具体的 
Width , 就像我所做的一样。一会儿你就会明门，为什么 ListBox 不能基 T - 其条 II 的圾大宽 
度来确定其自身宽度。 

我把 DisplayMemberPath 设置为 “ Name ” ，即指 ListBox 中条 U 的 Name 属性，并没 
有定义 DataTemplate 用于 M 示 NamedColor 项。这些项为 NamedColor 类型。幸运的是， 
NamedColor 包含 Name 属性， ListBox 用•条 U 属件。’开始的时候， W 为没有选中 
项，所以 设贾为 Grid 的 SolidColorBrush 会引用默认 Color 值，但一 A 选杼了一项，颜色就 
会形成窗口背景(见下图)。 
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该程序力: E 色主题。 ListBox 条 II 的亮背景和所选项高亮表示 ListBox 的默认行为。本 
章稍后会演示如何改变这种尚充显示。如果尝试运行程序.你会发现 " J " 以使用键盘的方向 
键、 PageUp 和 PageDown 、 Home 和 End 等按键来移动选项。 

有另-种替代方法吋以用来定义所选项的绑定。 SelectedValuePath 类似 T - 用来表明想 
_奴^^的条1.—|1(4性的 DisplayMemberPath . SelectedValuePath 是作为 SelectedValue 的屈 
性 名称： 



ItemsSource="[Binding Source={StaticResource namedColor), 
Path-All) M 
DisplayMemberPath="Name" 

SelectedValuePath="Color" 



<Gr id. Background 

<SolidColorBrush Color="{Binding ElemencName=lstbox r 
Path=SelectedValue)" /> 



ListBox 的 SelectedValuePath 属性表明 ListBox 条 U 的 Color 属性应作为 SelectedValue 
属性而 W . ， W 此简化了 SolidColorBrush 的绑定。 

很容易混浓 Selectedltem 和 SelectedValue 。 如果没有设 S SelectedValuePath H 性，两 
者就是一回亊。如果设覽了， Selectedltem 就是 集合里 的一个对象，而 SelectedValue 则是 
该对象的属性。 

更常见的做法是把 ListBox 的 ItemTemplate 属性设1!为 DataTemplate , 就像卜'曲 样。 
我将模板简化为 + M 示颜色的 I •六 进制表示，但在其他地方和前面的程序一样。 

项月： ListBoxWithltemTemplate I 义件： MainPage.xaml {片段 > 

<Page ... > 

<Page■Resources 〉 

<chi1:NamedColor x : Key="namedColor" /> 

</Page.Resources> 







Path=All) 


Width="388"> 
<ListBox.ItemTeraplate> 
<DataTemplate> 


BorderBnjsh=" {Binding BelativeSource= {BelativeSource TenplatedParent), 
Path=Foreground)" 

BorderThickness="l" 

Width="336" 


aded="OnItemLoaded" 


<Grid.ColumnDefinitions> 

<ColumnDefinition Width= M Auto" /> 

〈ColumnDefinition Width:"*"/> 

〈 /Grid.ColumnDefinitions 〉 

〈Rectangle Grid. Column='*0" 

Height="72" 

Width-"72" 

Margin= w 6 H > 

<Rectangle.Fill> 

<SolidColorBrush Color=*MBinding Color}" /> 
</Rectangle.Fill> 

</Rectangle> 

<TextBlock Grid.Column="l , ' 

FontSize="24 M 

Text=* M (Binding Name)" 

VerticalAlignment="Center" /> 

</Grid> 

</Border> 

</DataTemplate> 

</ListBox.ItemTemplace> 

</ListBox> 


<Gr id. Background 

<SolidColorBrush Color="(Binding ElementName=lstbox / 

Path=SelectedItem.Color}" /> 

</Grid.Background 〉 

</Grid> 

</Page> 

你 iij " 能会注意到，在该条 LI 模板的很前 KU . 如何定义 Border 着色很 不同。 在使用 
ItemsControl 的程序里， Border 能够引用主题前台幽笔来 着色： 

BorderBrush=** {StaticResource ApplicationForegroundThemeBrush)" 

而在黑色主题中(本章一直都使用黑色主题)，画笔为 n 色。 

然而.我们发现 ListBox 条 U 默认为内色背景，也就是说在该背景 K 白 色幽笔 就会消 
失。我们真的想把它设胃为 L ： 模板化的祖先元素的 Foreground 属性，就只能通过特定绑定 
语法： 


Foreground}' 


RelativeSource 只有两个选项 Self 和 TemplatedParent, 此处不能使用 Self, 因为 Border 
没有 Foreground 厲性。 

TemplatedParent 到底是什么？在这种情况下，它是 ContentPresenter, ContentPresenter 
是一个罕见类，除非你正在写另一种模板类型(控件模板)，本章后面将进行讨论。 TextBlock 
+需要 仟何绑定来获得恰当颜色，冈为其直接继承 Foreground 厲性，当选中项时，这两个 




如果需要， ListBox 可以支持多项选中。可以把 SelectionMode 属性设置为 Multiple 或 
Extended 并使用 Selectedltems 属性获取所选项 。 

11.6 面板和虚拟化面板 

我用 ListBoxWithltemTemplate 所做的事情在本书中并不经常这么做，我留了一些调试 
代码。这样做的唯一 H 的是让你能直观体会 ListBox 内部运行的重要过程。 

围绕每项的 Border 元素定义 Loaded 事件处理 程序： 

〈Border BorderBrush="[Binding RelativeSource={RelativeSource TemplatedParent }, 

Path=Foreground)" 



Loaded*"OnItemLoaded"> 


在 Loaded 处理程序中，调用 System.Diagnostics.Debug.WriteLine 显示 NamedColor 对 
象的 Name 属性， Name 属性设賢为加战元索的 DataContext 属性： 

void OnltemLoaded(object sender, RoutedEvencArgs args) 

( 

System.Diagnostics.Debug.WriteLine( H Item Loaded: " + 

((sender as FrameworkElement).DataContext as NamedColor).Name); 

) 

在 Visual Studio 调试器中运行该程序并观察 Output 窗口。程序首次加载的时候，你会 
看到只有儿种颜色，绝对没有全部 141 种颜色。我的平板电脑，屏幕高 768 像索， iij ' 以全 
部显示 6 项 ( 从 AliceBlue 到 Beige) ， 还能显示卜 • 一项的 - 半 。 Visual Studio Output 窗口中的 
列表显示已经加载 11 项的可视树，从 AliceBlue 到 BlueVioleU 

现在开始滚动列表。你会在 Output 窗口里会看到更多项，我看到了 Brown、BurlyWood 
和 CadetBlue, 但然后列表停 lh 了。 到底是怎么回事？ 

ListBox 讲究效率。 ListBox 只为 Jg 初要 fdU;- 的条加几个 ) 构建 "j 视树，如果一些项 
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滚出视图，而另外一些项就会滚入视图， ListBox 会重用这些可 视树。 为什么不重用呢？ 
ListBox 要做的就是改变绑定。 

如果馆合里有成 Cf 上千项绑定 ListBox 控件，这种虚拟处理至关軍要。但也意味着 
ListBox 不能确定需要显示所有项的宽度。 

注意： 在集合里，条0可能有一些特殊地方，虚拟化处理时会产牛 _ N 题，第16章将讨 
论这种情况，涉及到包含彼此链接的可视树。在这种情况下，基木 h 可以关闭虚拟化功能。 
条0控件总是通过某种形式的 Panel 来 显示条 tl ,吋以指定其使用哪个 Panel 派生类或自己 
提供。 ItemsControl 定义（并且 ListBox 继承）名为 ItemsPanel 的属性， HT 以设置为 
ItemsPanelTemplate 类型的一个对象。这就是本章标题所指的三个模板中的第：个，当然也 
是其中最简单的一个。 ItemsPanelTemplate 只需要一项，即 Panel 派生类。条 H 控件用 T •托 
管子项的面板。在常规 ItemsControl 中，为 StackPanel 。而在 ListBox 中，为 
VirtualizingStackPanel - 

在 ListBoxWithltemTemplate 中，可以通 过以下 标记把 ListBox 的 ItemsPanel 属性设置 
为默 认值： 



ItemsSource="{Binding Source={StaticResource namedColor}, 
Path=All)" 



<ListBox.ItemsPanel> 

<ItemsPanelTemplate> 



</ListBox.ItemsPanel> 

</ListBox> 

我们來试试将其变为常规 StackPanel ： 



现在， ListBox 首次加载时，会创建所有项看一看 Visual Studio 的 Output 窗口, 
就能得到验证。 

不过，也可以像下面这 样做： 



</ListBox.ItemsPanel> 


这样可以把垂直 ListBox 变为水平 ListBox 。 

这样还不行。还需耍对 ListBox 的大小和内部的 ScrollViewer 属性做一些调整，就像我 
4 i HorizontalListBox 项 ! 11 所做的那样。 


项「 I: HorizontalListBox | 义件： MainPage.xaml < 片段） 



</Page. 


: hll:NamedColor x:? 
Resources 〉 


jistBox N. 
Items! 


lame»"lstbox , ' 

Source="{Binding Source-(StaticResource 


Height:"120" 

ScrollViewer.HorizontalScrollMode= w Enabled" 
ScrollViewer.HorizontalScrollBarVisibility="Auto" 
ScrollViewer.VerticalScrollMode="Disabled" 
ScrollViewer.VerticalScrollBarVisibility="Disabled "〉 
stBox.ItemTemplate> 

<DataTemplate> 

<Border 

BorderBrush="{Binding RelativeSource=(Relative 
Pach=Foreground)" 
BorderThickness-"l w 
Width:"336" 

Margin-"6" 

Loaded="OnItemLoaded"> 

<Grid> 

〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Auto H /> 
〈ColumnDefinition Width="*"/> 
</Grid.ColumnDefinitions 〉 

〈Rectangle Grid.Column="0" 


〈 Rectangle.Fill 〉 

<SolidColorBrush Color*"(Binding Color}* 
</Rectangle.Fill> 


<TextBlock 


• {Binding 


</Grid> 

</Border> 

</DataTemplate> 

</ListBox.ItemTemplate> 

<ListBox.IternsPane1> 

<ItemsPanelTemplate> 

<VirtualizingStackPanel Orientation="Horizontal M /> 
</IternsPanelTemplate> 

</ListBox.ItemsPanel> 

</ListBox> 

<Grid. Background 

<SolidColorBrush Color="(Binding ElementName=lstbox, 
Path=SelectedItem.Color}" /> 

</Grid.Background 〉 


</Page> 


ScrollViewer 定义若干属性用 T 管理控件的外观和功能，但有时 ScrollViewer 自身会无 
法访问，当 ScrollViewer 在 ListBox 甲:的时候就会出现这种情况。在类 似怡况 卜 .ScrollViewer 
简单定义了几个附加属性，可以在 ListBox 标 记甩方 便地设 S 。 

程序和前一个 ListBox 之间的趋别仅在丁-水平方向使用了 VirtualizingStackPanel ,另外 
还改变了 ListBox 标记用于改变控件方向以及提供水平滚动。其结果是一个功能齐全的水 
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平 ListBox ( 见卜阁)。 



奇怪的是，我没有能够成功使用带 ListBox 的 WrapGrid 或 VariableSizedWrapGrid tfri 板。 
试图这么做会引发异常消息“正在使用的 Control Panel 不允许作为 Control 的 ItemsPanel^o 
fti 下一节我会提供类似东西来包装血板。 

11.7 自定义面板 

写自定义 Panel 派生类的主要原因吋能是将其当成条0控件的 ItemsPanelTempiate 来使 
用。每种类型的自定义 Panel 都能以不同方式来布局子对象。 

以+寻常方式来布局子对象——例如在圆里——如果所有项和屏幕都非常匹配，也不 
需要滚动，写这种 Panel 派生类也 t 午®容易了。如果耑要滚动，布局需要有利于发挥 
ScrollViewer 的能力。或荇， ScrollViewer 本身需要换为自定义的滚动机制。 

Panel 派生类 " J •以定义依赖项属性和附加诚性，例如， Grid 和 Canvas 都定义附加属性。 
然而，带附加属性的 Panel 派生类一般小_能用作 ItemsPanelTempiate ,因为从 DataTemplate 
设置这些附加属性通常都不合理。 

Panel 派生类总是權两个虚拟保护方法： MeasureOverride 和 ArrangeOverride 。 两个 
方法对应两种布局传递。在 MeasureOverride 方法中， Panel 派生类对所有子对象调用 
Measure 方法， il •算其自身所需尺\)。而在 ArrangeOverride 方法中， Panel 派生类对所有子 
对象调 ffl Arrange , 而子对象的大小和位覽则相对于其自身。 

两个名为 MeasureOverride 和 ArrangeOverride 的方法似乎有点特别。方法名称起源亍 
Windows Presentation Foundation ， 涉及 IHElement 和 FrameworkElement 类的 WPF 版本之 
间的区别。 UIElements 实现的足相对简单的布局系统，涉及 Measure 和 Arrange 方法。然 
iflj » 相对 r WPF UIElement » FrameworkElement 添加了 Horizontal Alignment 、 
Vertical Alignment 和 Margin 厲性，使布局变得更复杂。闽此， M 然 Measure 和 Arrange 仍 
然继续在布局中发挥作用，但 FrameworkElement 也定义 MeasureOverride 和 ArrangeOverride 
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以取代 Measure 和 Arrange 方法。 

总之， Panel 派牛 . 类覆写 MeasureOverride 和 ArrangeOverride ， 这作方法对所有子类调 
用 Measure 和 Arrange 。 在内部，子类里的 Measure 和 Arrange 方法调用子类的 
MeasureOverride 和 ArrangeOverride 方法。然后，子类会对其子类调用 Measure 和 Arrange. 
而进程会沿着⑷视树继续。 

"了以在仟何 FrameworkElement 派生类里覆写 MeasureOverride 和 ArrangeOverride ， 但 
除了 Panel 派生类，为 Windows Runtimes 所写的程序一般 都 + 这 样做。 

Panel 派生类自己不需要为其自身或子类进行以 卜属 性设 S: 

• Width、MinWidth 和 MaxWidth 

• Height、MinHeight 和 MaxHeight 

• Horizontal Alignment 和 VerlicalAlignment 



Visibility 

Opacity( + 影响布局） 

RenderT ransform( + 影响 布局 ) 


这些属性部会 A 动处理。 


在 Panel 派生类叭， MeasureOverride 方法如 卜所 示： 

protected override Size MeasureOverride(Size availableSize) 


availableSize 参数为 Size 类增，（正如你所知道的 ) 它有两个 double 炎 : 堺的属性，分别 
为 Width 和 Height. availableSize 参数有时非常简单。例如，如果面板是 Page 的内容，则 
availableSize 表示页面大小，通常为应用窗口的大小。如果面板在 Grid 中 . 元格内，而 Grid 
笮元格具有特定像袭维度，则 availableSize 就是中 . 元格大小。 

然而， Width 或 Height 或两者都 nj • 能为无限，这也是常见情况。迮 MeasureOverride 方 
法限，可以通过静态 Double.IsPositivelnfinity 方法测试 Width 或 Height 为尤限的情况。 

如果 availableSize 的 Width 或 Height M 性值为无限，也就是说， panel 的父类要提供给 
panel 所需的尽可能多的水平或乖直空间。如果 panel 是乖茛 StackPanel 的子对象，则 Height 
属性可以为 无限； 如果 panel 是水平 StackPanel 的子对象，则 Width 属性可以力无限。如果 
panel 在 Grid 中 . 元格内，而单元格的宽度和尚度都为 Auto, 则 availableSize 的 Width 或 Height 
属性值 ■ 以为无限。 

MeasureOverride 方法必须能正确处理这鵠情况。从 MeasureOverride 方法返回的 
desiredSize + 能有无限 Width 或 Height 属性，换句话说 ， MeasureOverride + 能简中.返回 
availableSize 。 这样行不通。 

MeasureOverride 方法必须对其每 -- 个子对象调用 Measure, 否则，子对象 + ■ 见。神 
一个 Measure 调用返回，子对象的 DesiredSize 属性为有效， panel 可以通过每个/•对象所 
需大 小来汁 算自身所需大小。 
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如果 MeasureOverride 对子对象调用 Measure , 则会为子对象提供卩 J * 用大小。其一两个 
厲性 nJ ■以为无限值。例如，萌直 StackPane ! 对其所有子对象调用 Measure ， 可用的 Width 
等丁其 自身可用的 Width , 坷用的 Height 为无 限值： 

protected override Size MeasureOverride(Size availableSize) 


double maxWidth = 0; 



chiId.Measure(new Size(availableSize.Width, Double.Positivelnfinity)); 
maxWidth = Math.Max(maxWidth, child.DesiredSize.Width); 
totalHeight += child.DesiredSize.Height; 

) 

return new Size(maxWidth, totalHeight); 
i 

萌直 堆叠的 MeasureOverride 方法累枳所有子对象的最大宽度和总 A 度。两者成为其 
所需大小。 

ArrangeOverride 方法有一个参数表示为如板 il •算大小。对于垂直堆苻的面板.方法会 
冉次遍 W 所有子对象，进行#加，为毎个子对象指定自己的宽度以及子对象所需的 卨度： 

protected override Size ArrangeOverride(Size finalSize) 


foreach (UIElement child in this.Children) 

( 

chiId.Arrange(new Rect(0, y, finalSize.Width, child.DesiredSize.Height)); 
y += child.DesiredSize.Height; 



用 WBF 编程时，我发现了- •个有用的 Panel 派生类，称为 UniformGrid . 它和常规 Grid 
类似，不过每个中.元格有同样大小。其子对象茛接分配到一个笮元格，这样就不谣要附加 
厲性。 虽然子对象的大小可以小同，但 UniformGrid 会把子对象当成大小都相同来进行处 
理。大小是 基丁最 大子对象的大小或 UniformGrid 的可用空间 大小。 

我的 UniformGrid 版本定义两个 int 类®的属性 Rows 和 Columns , 但默认值是 _1 ,表 
氺没有默认仿。如果没有设贾这两个属性， UniformGrid 会试图确定一个最优的行数和列数， 
否则，如果设 wr 两个属性之一，另一个厲性就会根据子对象的数 最汁算 出来。不建议设 
背两个属性，如果产品的行和列数最少丁-子对象数，有些子对象就吋能不会出现在面板! H 。 

在 UniformGrid 的大多数用途中， Rows 和 Columns 都保留默认值 -1 或者把其中之一 
设 S 为1。如果 Rows 或 Columns 设置为丨， UniformGrid 就像一个只冇中-列或中.行的 Grid , 
或者像-个毎个子对象都有相同大小的 StackPanelo 

如果 availableSize 的 Width 和 Height 属性都为有限 ffl , UniformGrid 就会尝试让所有子 
对象适合该空间，否则，会使用最大子对象的大小来布局其子对象。 UniformGrid 不能处理 
的唯一情况是行和列都为 -1, 而•用的 Width fll Height 都力 无限。这种怙况会造成异常。 

像 StackPanel —样， UniformGrid 还定义了 Orientation 诚性 。以 卜是其共享的属性定义 
和属性变更处理程序。 
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项 F}: Petzold. ProgrammingWindows6.Chapter 1 1 | 义件： UniformGrid.es (IV 段） 
public class UniformGrid : Panel 
( 

// Set by MeasureOverride, used in ArrangeOverride 
protected int rows, cols; 



RowsProperty = DependencyProperty.Register("Rows", 
typeof(int), 
typeof(UniformGrid), 

new PropercyMetadata(-1, OnPropertyChanged)); 

ColumnsProperty = DependencyProperty.Register("Columns", 
typeof(int), 
typeof(UniformGrid), 

new PropertyMetadata(-1, OnPropertyChanged)); 



在属性吏改处理程序中， InvalidateMeasure 和 InvalidateArrange 调用告知布局系统志耍 
新布局。调用 InvalidateMeasure 会触发测頃:以及安排传递， InvalidateArrange 调用只触发安 
排传递，而忽略测量 传递。 在这种情况下，叶刀都保持着相同的大小，但子 对象吋 能会移 
动到+同位買。 

当然，这并不是让布局无效的唯一方忒，例如，血板里子对象数 燉的任 何变化都会触 
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发一个新布局。 

MeasureOverride 方法首先执行两个有效性检查，然沿用 Rows 和 Column 属性以及子 
元素数最来计算 rows 和 cols 字段： 

项目： Petzold.ProgrammingWindows6.Chapter 11 | 文件： UniformGrid.es ( 片段） 
protected override Size MeasureOverride(Size availableSize) 

( 

// Only bother if children actually exist 
if (this.Children.Count == 0) 
return new Size(); 


// Throw exceptions if the 
if (this.Rows != -1 this.Rows < 1) 
entOutO 


aren't OK 


OfRangeException ("UniforinGrid Rows must be greater than 


if (this.Columns !- -1 && this.Columns < 1) 

throw new ArgumentOutOfRangeException ("UniformGrid Columns must be greater than zero"); 

II Determine the actual number of rows and columns 

// - - - 

// This option is discouraged 

if (this.Rows !« -1 && this.Columns !* -1) 

( 

rows - this.Rows; 
cols = this.Columns; 

) 

// These two options often appear with values of 1 
else if (this.Rows != - 1 ) 

( 

rows = this.Rows; 

cols = (int)Math.Ceiling((double)this.Children.Count / rows); 

) 

else if (this.Columns !« - 1 ) 

l 

cols = this.Columns; 

rows = (int)Math.Ceiling((double)this.Children.Count / cols); 

) 

"No values yet if both Rows and Columns are both -1, but 

// check for infinite availableSize 

else if (Double.Islnfinity(availableSize.Width) && 

Double.Islnfinity(availableSize.Height)) 

( 

throw new NotSupportedException("Completely unconstrained UniformGrid " + 

"requires Rows or Columns property to be set"); 


MeasureOverride 进程继续汁算最大子元素的大小。以下代码列举了通过 Children 集合 
为每一个子元素循环调用 Measure 方法。如果没有调用 Measure , 子元素的大小则为0。 
Measure 调用 / Ti ， 子元素的 DesiredSize 属性为有效值： 


项 R: Petzold. PrograireningWindows6.Chapterl 1 | 义件： UniformGrid.cs ( 片段 } 
protected override Size MeasureOverride(Size availableSize) 


// Determine the maximum size of all children 

// - 

Size maximumSize = new SizeO ; 

Size infiniteSize = new Size(Double.Positivelnfinity, 

Double.Positivelnfinity); 

// Find the maximum size of all children 
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foreach (UIElement child in this.Children) 



Size childSize = child.DesiredSize; 

maximumSize.Width = Math.Max(maximumSize.Width, childSize.Width); 
maximumSize.Height = Math.Max(maximumSize.Height, childSize.Height); 


许多 Panel 派生类都会进行此类汁算。然而， Measure 方法并不总是调用无限卨度和宽 
度。在该特定情况下， UniformGrid 要确定每个元素的“自然大小”，方法就这样简单。 

前面提到过. Panel 派生类+需要考虑其自身或子类的 Margin 属性设置。可用大小作 
为参数传递给 MeasureOverride , 并不包括对元素设置的任何 Margin 属性。然而，如果面 
板对子类调用 Measure，uj 用大小则隐式包含了子类的 Margin 。 子类的 Measure 方法根据 
其 Margin 设 S 减少其吋用大小，（当然，如果大小无限，就像这种情况，结果都是一 样。） 
+包含 Margin 的大小传递给子类的 MeasureOverride 方法，子类 计算从 MeasureOverride 返 
回的自身大小。子类的 Measure 方法继续把其 Margin 加上从 MeasureOverride 返回的大小， 
并把子类的 DesiredSize 属性设 S 为增加后的大小。 

这就是 Margin 如何布局的过程，而 MeasureOverride 则不然。 

现在，计算好了最大子类大小，就可以计算 Panel 所霭大小 。但仍有可能需要相当漫 
长的汁 算： 如果 Rows 和 Columns 两者都保留默认值， Panel 木身则需要堪丁 ""J •用大小和最 
大子类大小来计算最优行数和列数。 

项 R: Petzold.ProgrammingWindows6.Chapter 11 | 文件： UniformGrici.es < 片段） 

protected override Size MeasureOverride(Si2e availableSize) 


// Find rows and cols if Rows and Columns are both -1 
if (this.Rows »* -1 && this•Columns -■ -1) 

( 

if (Double.Islnfinity(availableSize.Width)) 

( 

rows = (int)Math.Max(1, availableSize.Height / maximumSize.Height); 
cols = {int)Math.Cei 1 ing((double)this.Children.Count / rows); 

) 

else if (Double.Islnfinity(availableSize.Height)) 

I 

cols - (int)Math.Max(1, availableSize.Width / maximumSize.Width); 
rows » (int)Math.Ceiling((double)this.Children.Count / cols); 



double aspectRatio = maximumSize.Width / ma x imumSize.Height; 
double bestHeight - 0 ; 
double bestWidth = 0; 



int tryCols = {int)Math.Ceiling((double)this.Children.Count / tryRows); 
double childHeight = availableSize.Height / tryRows; 
double childWidth = availableSize.Width / tryCols; 


// Adjust for aspect ratio 
if (childWidth > aspectRatio * childHeight) 
childWidth * aspectRatio * childHeight; 






childHeight = childWidth / aspectRatio; 


// Check if it's larger than other trials 
if (childHeight > bestHeight) 

( 

bestHeight = childHeight; 
bestWidth = childWidth; 
rows = tryRows; 
cols = tryCols; 


// Return desired size 

Size desiredSize = new Size (ftech.Min (cols * maximumSize.Width, 

Math .Min (rows * maximfnSize. Height, 



availableSize.Width ), 
availableSize.Height)); 


在正常情况 K , ifii 板所需大小完全基亍子类的大小和其他任何可能需要的开销。大小 
可能大于 availableSize <, ScrollViewer 就是这样知道怎么滚动子元素的。然而，如果 
UniformGrid 有非无限值 availableSize , 我想把面板刚好限制到该大小。 

ArrangeOverride 方法往比 MeasureOverride 简中 得多。 fmalSize 参数是分 All 给血板的有 
限大小。对 ArrangeOverride 的唯一要求是对每个子元素调用 Arrange 方法，并传递其 Rect 
对象表示子元素相 对于面 板的位置和子元素的大小。该大小通常是子元素的 DesiredSize 屈 
性，但在这种情况下，我想把面板尺寸分配为行和列。 


m ： 


: Petzold.ProgrammingWindows 6 .Chapter 1 1 
: ected override Size ArrangeOverride(Si; 


义件： UnifomGrid.es ( 片段 > 


rangeOverride(Size finalSize) 



Orientation.\ 



rows; row++) 


double y - row * cellHeight; 
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return base.ArrangeOverride(finalSize); 


这是 Orientation 在 UniformGrid 中唯一发挥作用的地方，并控制着子元 桌应该 首先从 
左到右定位、还是首先从上到卜定位。 ArrangeOverrid 方法总是返回 finalSize ， 这是堪木方 
法返回的。 

我们来试试 availableSize 的 Width III Height 属性为有限值的情况 。 ItemsControl +在 
ScrollViewer 时，就像卜曲这样。 


项 R: AllColorsItemsControl | 义件： MainPage.xaml ( 片段 > 
<Page ... > 


<Page.Resources 〉 

<chl1 : NamedColor x:Key="namedColor M /> 



kground-"(StaticResource ApplicationPageBackgroundThemeBrush) M > 
msControl ItemsSource="(Binding Source*{StaticResource namedColor), 
Path-All)"> 

<ItemsControl.ItemTemplate> 

<DataTemplate> 

<Border 

BorderBrush="{ Binding RelativeSource= (FelativeSource TenplatedParent), 


BorderThickness="2** 

Margin="2"> 

<Border.Background 〉 

<SolidColorBrush Color="{Binding Color}" 
</Border.Background 〉 


<Viewbox> 


<TextBlock Text="I Binding Name)" 

HorizontalAlignment="Center" 

VerticalAlignment="Center"> 

<TextBlock.Foreground 〉 

<SolidColorBrush Color="iBinding Color, 

Converter*{StaticResource colorConverter))" /> 
</TextBlock.Foreground 〉 

</TextBlock> 

</Viewbox> 

</Border> 

</DataTemplate> 

</ItemsControl•ItemTemplate> 


<ItemsControl.ItemsPanel> 

<IternsPanelTemplate> 

<chll:UniformGrid /> 
</IternsPanelTemplate> 

</ItemsControl.ItemsPanel> 
</ItemsControl> 

</Grid> 

</Page> 


注意结尾处的 UniformGrid , 它被用作控件的 ItemsPanelo 

我把条目模板弄得比先前例子简中•了一些。现在模板包含一个 Bordet •和一个 TextBlock 
子类， Border 的 Background 厲性通过彿定到 NamedColor 的 Color 厲性构造，而 TextBlock 
显示颜色名称。注意， TextBlock 在 Viewbox 中，这样文本大小应该适应子类的吋用大小。 
还要注意，我把 TextBlock 的 Foreground 绑定到 Color 厲性，但通过名力 
ColorToContrastColorConverter 的转换器进行传递。转换器 U •算灰度对应的输入颜色，并选 



.White 进行对比。 


ingWindows6.Chapter 11 | 文件： ColorToContrastColorConverter.c 
: rastColorConverter : IValueConverter 


E 

I 


_ 

__ 

■I 

1 

_==== 


Bi: 













































然而，如果笮元格变得太小，视觉上会有一点点断裂效果。 

现在我们试试把 UniformGrid 放入 ListBox 。 我保留了简化后的数据模板，但给 Border 
和 TextBlock 赋予了特定大小。 

项 ListBoxWithUniformGrid | 文件： MainPage.xaml < 片段） 

<Page ... > 

<Page.Resources> 

<chl1 : NamedColor x : Key="namedColor w /> 

<chl1 : ColorToContrastColorConverter x : Key="colorConverter" /> 

</Page.Resources 〉 

<Grid Background*"(StaticResource App 1icationPageBackgroundThemeBrush}"> 

<ListBox ItemsSource="(Binding Source=(StaticResource namedColor ), 

Path=All) M > 



BorderBnjsh=" {Binding ReiativeSource= {BelativeSource TGnplatedParent) / 
Path-Foreground}" 



〈 Border.Background 〉 

<SolidColorBrush Color="{Binding Color}" /> 
〈 /Border•Background 〉 

〈TextBlock Text:"{Binding Name}" 



HorizontaiAlignment="Center" 

VerticalAlignment»"Center"> 



<SolidColorBrush Color="{Binding Color, 



</TextBlock.Foreground 〉 



</DataTemplate> 
</ListBox.ItemTemplate> 



<ItemsPanelTemplate> 

<chll:UniformGrid /> 
</ItemsPanelTemplate> 
</ListBox.ItemsPanel> 



</Grid> 

</Page> 

在这种情况 _ K •传给 UniformGrid 1 MeasureOverride 的 availableSize 参数有尤附 Height 
厲性值用丁•垂直滚动。 UniformGrid 根据坷用宽度 和最大 子对象宽度来 H 算 列数.行数也由 
此进行计算。 UniformGrid 所盅大小是基 T 其总高度，曲板 则可垂 直滚动(见下 图)。 



很容易把它转为水平滚动。正如前面在 HorizontalListBox 项目看到的，可以直接设置 

ScrollViewer 附加属性，然后把 UniformGrid 的 Orientation 属性 设置为 Horizontal ： 

<ListBox ItemsSource="{Binding Source={StaticResource namedColor}, 

Path=All)" 

ScrollViewer.HorizontalScrollMode="Enabled" 

ScrollViewer.HorizontalScrollBarVisibility="Auto" 

ScrollViewer.VerticalScrollMode="Disabled" 

ScrollViewer.VerticalScrollBarVisibility«="Disabled"> 

<ListBox.ItemTemplate> 

<DataTemplate> 

</DataTemplate> 

</ListBox.ItemTemplate 〉 

<ListBox.ItemsPanel> 

<XtemsPdnelTemplate> 

<chll:UniformGrid Orientation="Horizontal" /> 

</ItemsPanelTemplate> 

</ListBox.ItemsPanel> 



ii 然没有严格要求有 Orientation 的 Horizontal 设 置， 但会引起子元桌排序差异，先从 
I •.到下，然后从左到右(见 F 图〉。 
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11.8 条目模板条形图 

条 u 控件有一个伟大的“小把戏”，无需费力就可以创建条形图。你真正需要的是数 
据项，包含适合绑定的数据厲性、 ItemTemplate 里的 Rectangle 以及 UniformGrid 或 
StackPanel 。 

RgbBarCharl 项口 演示了该方法 。 ItemsControl 的 ItemsSource 当然是 NamedColor 对象 
的染合。 DataTemplate 是一个垂直 StackPanel * 包含三个 Rectangle 元素，每个 Rectangle 
元素的 Height 厲性都绑定到条 H 的 Color 属性的 R 、 G 、 B 属性。一般情况下，这将创建三 
个 Rectangle 元素的一个堆抒， Rectangle 元素从 StackPanel 的顶部开始，而我想要一个从 
底部开始的更传统堆苻条形图，所以用 RenderTransform 从 h 到下翻转条形。 

项目： RgbBarChart | 文件： MainPage.xaml 《片段 } 

<Page ... > 

<Page.Resources 〉 

<ch11:NamedColor x : Key="namedColor" /> 

</Page.Resources> 


<Grid Background= M (StaticResource ApplicationPageBackgroundThemeBrush}"> 

<ItemsControl ItemsSource-"{Binding Source-{StaticResource namedColor}, 

Path=All}"> 



Height-"765" 

RenderTransformOrigin-' , 0.5 0.5" 
Margin-"! 0"> 



<ScaleTransform ScaleY="-l" /> 
</StackPanel.RenderTransform> 


〈Rectangle 

<Rectangle 



Fill-"Red" 

Height*"{Binding Color.R}" /> 
Fill="Green" 

Height="(Binding Color.G}" /> 

Fill 工 "Blue" 

Height 53 " (Binding Color.B)" /> 


<ToolTipService.ToolTip> 

<ToolTip x:Name="tooltip" 

PlacementTarget=" (Binding ElementNanie=stackPanel}"> 


<! 一 Set DataContext to StackPanel containing items—> 
〈Grid DataContext=" {Binding ElefnentName=tooltip, 

Path-PlacementTarget}"> 

<!— Set DataContext to NamedColor --> 
<StackPanel DataContext*"(Binding DataContext)" 
<TextBlock Text 二 - 丨 Binding Name)" 

HorizontalAlignment="Center" /> 
DataContext®"[Binding Color}" 
rientation-"Horizontal" 
HorizontalAlignment»"Center"> 
<TextBlock Text«="R=" /> 

<TextBlock Text-"(Binding R)" /> 
<TextBlock Text-" G- M /> 

<TextBlock Text="{Binding GJ" /> 
〈TextBlock Text-" B-" /> 

<TextBlock Text-"(Binding B 丨 " /> 
</StackPanel> 

</StackPanel> 

</Grid> 
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</ToolTip> 

</ TooITipService.ToolTip> 
</StackPanel> 

</DataTemplate> 

</IterasContxol.IteraTemplate> 


<ltemsControl.ItemsPanel> 
<ItemsPanelTemplate> 

<chll:UniformGrid Rows="l" /> 


</IternsPanelTemplate> 
</ItemsControl.ItemsPanel> 



</Grid> 

</Page> 


当然，条形图自身很模糊，而辨认它们有个好方法.杳肴鼠标悬停时所激活的提示信 
息即坷。但这样会史加 混乩。 "]"以把 ToolTipService . ToolTip 附加 厲性设 S 作为子元系，并 
月把 ToolTip 控件定义为其子儿系，这样 mJ 以在元素上附上提示信息。 ToolTip 派生自 
ContentControL 然而， ToolTip 元素实际上并+是坷视树的一部分，因为它“漂浮”在树 
外。 ToolTip 允袭没有通过视树 Ifij 继承属性，包括最軍耍的 DataContext W 件。我不得不 
M 过 ToolTip 的 PlacementTarget K 件来进行处现。 

以卜条形图敁示了所有141种颜色的红色、绿色和蓝色相对构成.颜色提术信息显示 
了颜色名称和 RGB 值。 



MT White , 颜色成分的总和为765,只比一个触投屏768像素高度的屏嵇小一点点。 
当然，用 RenderTransfbrm 吋以缩短条形图.占据屏嵇吏小(或吏大 值)。 


11.9 FlipView 控件 

我最备欢 Windows Runtime 引入的控件之一 FlipView . FlipView (和 ListBox H ) 通过 
Selector 方 Z 派卞 ItemsControl。FlipView —次只显•一项，该项即为所选项，因此，在 
大多数应用中+能代替 ListBox 。似 FlipView 有一个好的触控接口，记住 FlipView 很适合 
用 7* •—些特殊 IJ 的。 



























像本章中的许多其他项目一样， FlipViewColors 项 H 使用 
Petzold . ProgrammingWindows.Chapterll 库。 MainPage.xaml 的 Resources 节包含对 
NamedColor 类的通常引用，同时定义了 DataTemplate Items 和 PanelTemplate . 然后在 Style 
中定义中引用了两者， Style 定义还包括 ItemsSource 绑定。 Border 和 TextBlock 都有 
SolidColorBrush 定义并绑定到两个 FlipView 控件。 


项目 ： FlipViewColors | 文件： MainPage.xaml ( 片段） 
<Page ... > 

<Page•Resources 〉 

<chl1 : NamedColor x : Key="namedColor" /> 


<chll:ColorToContrastC 


< : Key="colorConverter" /> 


aTemplate x:Key="colorTemplate"> 

〈Border BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent), 


- f •. , .- V-> - 1 ~： ..r^ ?V| , <fl|,~/ V ； yA^L' |Rjl ’_'、 .」 一、 W . .. 、 ’ 内 、成 ^ .-. V^l- 


</TextBlock. Foreground 
</TextBlock> 

</Border> 

</Da taTemplate> 


<IternsPanelTemplate x : Key="panelTemplate" 
<VirtualizingStackPanel /> 
</ItemsPanelTemplate> 


〈Style TargetType="FlipView "〉 

〈Setter E»roperty="Width" Value*"300" /> 

<Setter Property="Height" Value="100" /> 

〈Setter Property-" ItemsSource" Value='M Binding Source- (StaticResource namedColor), 

Path=All) M /> 

<Setter Property="ItemTenplate" Value="(StaticResource colorTemplate}" /> 
〈Setter Property="ItemsPanel" Value="{StaticResource panelTemplate}" /> 
<Setter Property= M SelectedValuePath" Value=.’Color" /> 

</Style> 

</Page.Resources> 


<Grid Background 55 "{StaticResource ApplicationPageBackgroundThemeBrush)' 
<Grid.RowDefinitions> 

<RowDefinition Height»"Auto" /> 

<RowDefinition Height*"*" /> 

</Grid.RowDefinitions> 


<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width= 
<ColumnDefinition Width: 
</Grid.ColumnDefinitions 〉 


<Border Grid.Row-"。" 

Grid.Column-"0" 
Grid.ColumnSpan= 
BorderThickness= 


CornerRadius="48" 
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Padding="48" 

HorizontalAlignment="Center"> 

<Border. Background 

<SolidColorBrush Color-"(Binding ElementName=£lipViewl, 

Path=SelectedValue) M /> 

</Border.Background 〉 

<Border.BorderBrush> 

<SolidColorBrush Color="{Binding ElementName*flipView2, 

Path-SelectedValue)" /> 

</Border.BorderBrush> 

<TextBlock FontFamily* ,, Times New Roman" 

FontSize-"96 , '> 

The <Italic>FlipView</Italic 〉 Control 
<TextBlock.Foreground> 

<SolidColorBrush Color="{Binding ElementName=flipView2, 

Path=SelectedValue)" /> 

</TextBlock.Foreground 〉 



<FlipView Name-"flipViewl" 

Grid.Row="l" 

Grid.Column="0" /> 

<FlipView Name- M flipView2" 

Grid.Row="l" 

Grid.Column= H l" /> 

</Grid> 

</Page> 

默认情况卜 '，FlipView 的 ItemsPanelTemplate 为 VinualizingStackPanel , 就像 ListBox 
一样，+过为水平方向。我用一个垂直 VirtualizingStackPanel 代替了它。像 ListBox —样， 
FlipView 控件会扩展到覆盖所有可用空间，因此最好要 设置明 确的 Height 和 Width 厲性。 
这甩的想 法是： “拨号”控制两种不同颜色。第一种颜色控制 Border 的 背拔， 而第：种控 
制边羿自身和文木(见下图)。 



第16章将演示如何把 FlipView 控件当成一个简中.的电子书阅读器。我之所以冇这个 
想法，是因为标准打印机对话框使用 FlipView 做预览页面，第17章会演示此功能，并使 
用能够进行 U 期选择的 FlipView 控件。 
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11.10 基本控件模板 


你已经看到了如何把 DataTempIate 设置为 ContentControl 派生类的 ContentTemplate 属 
性，或者设實为 ItemsControl 派生类的 ItemTemplate ， 以用于格式化显示数据对象。 

你还看到了如何定义 ItemsPanelTemplate ,以用于设 S ItemsControl 派生类的 ItemsPanel 
供 Ifif 板托管条 U 之用。 

第二.种类型模板为 ControlTemplate 类型。 Control 类定义了 ControlTemplate 类把的 
Template 属性，允许完全歌新定义控件本身的视觉效果，不是指控件内容，而是指通常称 
为“镶边”的控件部分。 

是否存在 Template 属性，可能是 Control 派生类和仅作为 FrameworkElement 派牛 .类之 
间最重要的区别。控件有镶边，而且镶边外观完全调。 

无论何时你认为需要自定义控件，都应该问问0己真的是新控件，还是只是具有不同 
外观的现有控件。有时会很幸运，会发现通过 Style 就可以采用现有控件。不过其他时候， 
贝 1 J 需要 ControlTemplate o 

和 Style 一样，常常把 ControlTemplate 定义为资源，以便进行共享。还是跟 Style 一样， 
ControlTemplate 有控件类型的 TargetType , " J * 用于模板设汁。 Control 所定义的 Template 
属性受 依赖厲 性所支持，也就是说，吋以在 Style 1设腎 Template 属性。这种做法很常见， 
如 F Resources 节的代码所示： 



</ControlTemplate> 

</Setter.Value> 

</Setter> 

</Style> 


—般来说，你会想用 Setter 对象，通过定义模板来设 S 控件的一些属性。 Setter 标签定 
义控件的新默认属性，但是可以通过这种样式控件的木地属性设 K 覆写。 

为了明确下面几页内容的 H 的，我要对控件自身定义 ControlTemplate 。 而为了演示控 
件模板的基本知识，我要電定义 Button 外观，只不过不会完全不同丁•现有 Button 。 

以下标准 Button 会出现在可视树里。 Button 有内容、节件处理程序和一些常见的 
属性： 


〈Button Content="Click me!" 

Click^-OnButtonClick" 


HorizontalAlignroent="Center" 
VerticalAlignment="Center" /> 


我们把 Template 属性变成属性元素，对 Button 定义新的 ControlTemplate ： 

〈Button Content="Click me!" 


Click="OnButtonClick" 

HorizontalAlignment="Center" 

VerticalAlignment="Center"> 




</Button> 


</ControlTemplate> 


注意 ControlTemplate 的 TargetType 。 有时可以不需要，而模板仍然起作用，除非模板 
引用了 target 控件所定义而非 Control 所定义的属性。 

带空 ControlTemplate 的 Button 仍然可以实例化，但不再有任何视觉外观。因为没有视 
觉效果，因此也没有办法能让用户看到，更不用说点击了。为了确保不会造成太多损害， 
我们把一个临时 TextBlock 放入 ControlTemplate 标签之间： 



</Button.Template> 



现在， Button 有了只包含文本的视觉外观，也有了功能。如果轻击或点击 TextBlock , 
肯定会触发 Click 贵件。 然而，视觉效果是静态的。鼠标指针悬停在 Button 之 h 或者点击 
Button 的过程中，都不会有任何特殊的外观指示。有了标准视觉效果，可以在模板中定义 
这些特殊外观。 

4以围绕 TextBlock 放置 Border ： 


〈Button Content="Click me!" 

Click= M OnButtonClick M 

HorizontalAlignment="Center" 

VerticalAlignment*"Center"> 

<Button.Template 〉 

<ControlTemplate TargetType="Button"> 



</Border> 
</ControlTemplate> 
〈 /Button.*] 

</Button> 


t="temporary" 


效果如 K 图所示。 
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但你真的想在模板中通过硬编码写出红色画笔吗？如果为中个 Button 定义模板，就像 
我现在所做的这样，可以这么做。但在一般情况下，可以把模板定义为共享资源，有时你 
希辑 Border 为红色，其他时候你又希望是别的颜色。 

Control 本身定义了 BorderBrush 和 BorderThickness 属性，而 Button 继承这些属性 ，因 
此，对 Button 本身定义这些属性更合理 一些： 

〈Button Content:"Click me!" 

Click="OnButtonClick" 

HorizontalAligninent* s "Center" 



BorderBrush="Red" 

BorderThickness="3"> 


<Button.Template> 

〈ControlTemplate TargetType="Button"> 



</ControlTemplate> 

</Button.Template> 

</Button> 

但 Border 现在从 Button 的视觉中完全消失了！模板 1 R 的 Border 并没有神奇般地获得 
Button 上设置的属性。模板里的 Border 需要几种绑定来引用 Button 所定义的属性。 

以下是一种非常特殊类型的绑定，称为 TemplateBinding , 它有自己的标记扩狀： 



BorderBrush="Red" 

BorderThickness="3"> 



<ControlTemplate TargetType="Button •’> 

<Border BorderBrush="{TemplateBinding BorderBrush}" 

BorderThickness="{TemplateBinding BorderThickness)"> 
<TextBlock Text="temporary" /> 



TemplateBinding 所做的是把 ControlTemplate wj ■视树里的元素属性绑定到应用 
ControlTemplate 控件的属性 I :。与以前不同，该 Button 的视觉效果包含了红色 Border 。 

TemplateBinding 语法非常简 1 它总是以 ControlTemplate 的 Kf 视树 1 &的元素依赖属性 
为 U 标，总是引用应用模板的控件的属性。 TemplateBinding 标记不能运行其他东西， 
TemplateBinding 只出现在 ControlTemplate 里的 Kf 视树 h 。 

TemplateBinding 实际上是 RelativeSource 绑定的捷径。以 K 绑定也能发挥作用，但语 
法明显地较 混乱： 



<Button.Template 〉 


TargetType=' 


〈Border BorderBrush=" {Binding RelativeSource= {RelativeSource TemplatedParent}, 

Path=BorderBrush}" 

BorcterThickness='' {Binding PelativeSource= {RelativeSource TenplatedParent:}» 

Path=BorderThickness)"> 

<TextBlock Text="temporary" /> 

</Border 〉 

</ControlTemplate> 

</Button.Template 〉 

</Button> 

如果在 ControlTemplate 里需要建立双向绑定，就可以使用这种冗长的语法。 
TemplateBinding 为单向，且不接受 Mode 设置。 

现在，假设你想要把这种红色边界作为新按钮默认值，但又想让单个按钮覆写默认值。 
在这种情况下，可以把 ControlTemplate 定义为 Style 的一部分。请记住，一般情况下 Style 
被定义为资源,供多个按钮共享〃但在本练习中，我的做法是直接把 Style 附加到按钮 I :: 

<Button Content- H Click me!" 

Click= M OnButtonClick" 

HorizontalAlignment="Center" 

VerticalAlignment="Center w > 

<Button.Style> 

<Style TargetTypeButton"> 

<Setter Property="BorderBrush" Value-"Red" /> 

〈Setter Propert;y="BorderThickness" Value="3 n /> 

<Setter Property="Template H > 

<Setter.Value> 

<ControlTemplate TargetType="Button"> 

<Border BorderBrush-"{TemplateBinding BorderBrush}" 

BorderThickness=" {TenplateBinding BorderThickness)"> 
<TextBlock Text®"temporary" /> 

</Border> 



</Setter.Value> 

</Setter> 

</Style> 

</Button.Style> 

</Button> 

现在， wj 以对 Button 自身设覽 BorderBrush 和 BorderThickness 属性，覆写 Style 里的 
那 _ 设背。把默认的 Background 和 Foreground 属性添加到 Style ， 同时添加 FontSize ， 让 

文本大 一点： 


〈Button Content="Click 


HorizontalAlignment-"Center" 

VerticalAlignment="Center"> 

<Button.Style> 

<Style TargetType»'’Button**> 

<Setter Property="Background" Value="White" /> 

<Setter Property="Foreground" Value»"Blue" /> 

<Setter Property="BorderBrush" Value="Red" /> 

<Setter Property="BorderThickness" Value="3" /> 

<Setter Property="FontSize" Value="24" /> 

<Setter Property="Template"> 

<Setter.Value> 

Template TargetType="Button"> 
rder Background®"(TemplateBinding Background}" 
BorderBrush*"{TemplateBinding BorderBrushJ" 
BorderThickness=" (TerplateBindina 
<TextBlock Text*"temporary" /> 
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</Style> 

</Button.Style> 

</Button> 

注意 Border 的 Background 属性的 TemplateBinding 。+ 过 ， TextBlock 小需 Foreground 
或 FontSize M 性的 TemplateBinding . 因为这择厲性通过视树继承。 TextBlock 现在 W -> J < 
蓝色文本，比以前大了一点(见下 图)。 



H 前为止，毎个 TemplateBinding 都通过控件31相同名称的属性绑定了 n 了视树的元素属 
性。 并不要求 …对一 对等。在模板11，可以轻松交换 Background 和 BorderBrush 彿定，因 
为两者都是 Brush 类型。 

<ControlTemplate TargetType="Button"> 

<Border Background="{TemplateBinding BorderBrush)" 

BorderBrush="{TemplateBinding Background)" 

BorderThickness="{TemplateBinding BorderThickness)"> 

<TextBlock Text="temporary" /> 

〈 /Border 〉 

</ControlTemplate> 

除了可能让人困惑之外，这么做其实并没有错。 

你也许想让新 Button 的 Border 有圆角，然而 Control 或 Button 里没有仟何对应属性， 
因此，除非我们想定义 Button 派生类，而且包含 ComerRadins 厲性，否则就不得不写代码。 
以卜仅为 ControlTemplate 部分标记： 

<ControlTemplate TargetType*"Button"> 

<Border Background="{TemplateBinding Background}" 

BorderBrush*"{TemplateBinding BorderBrush}" 

BorderThickness="(TemplateBinding BorderThickness}" 

CornerRadius*"12"> 

<TextBlock Text="temporary" /> 

</Border> 

</ControlTemplate> 


效果丨 I 前如 K 图所示。 







现在我们来解决 TextBlock 使用临时文本这个小问题。根据1;|前所肴到的，你 吋能会 
用 TemplateBinding 绑定到 Button 的 Content K 性來取代临时文木： 

<TextBlock Text='M TemplateBinding Content)" /> 

在该例中这样做钉效，不过错得离谱。木草开始时 i 、 J ■论过话如 Button 的 ContentControl 
派生类的 Content 属性如何成为 object 类堺以及 TextBlock 怎么只对文木起作用。如采内容 
设質为 位图，这么做甚至不起作用。 

幸运的是，有一个特殊类专 N 用卩在 ContentControl 派生类 Tl 敁示内容。该类就是 
ContentPresenter 。 和 ContentControl .样 ， ContentPresenter 有 object 类明的 Content 厲性： 



〈Border Background="{TemplateBinding Background}" 

BorderBrush-"{TemplateBinding BorderBrush}" 
BorderThickness="1TemplateBinding BorderThickness}" 
CornerRadius="12"> 

<ContentPresenter Content* 5 "(TemplateBinding Content)" /> 
</Border> 



大多数时候，在每个 ContentControl 派 I : 类模板中.，我们都会发现 ContentPresenter 。 
ContentPresenter 派 Ul FrameworkElement , 似也会产生自身的 Kf 视树來免现内容。在木特 
例中 ， ContentPresenter 创纽 TextBlock 来 W.i Jt Content t .4 性。 

ContentPresenter Hi 被委托达立 kT 视树，用4; •祕」 •控件的 ContentTemplate M 性的任 
何类印内容。讲实1 :， ContentPresenter 有 f : l 己的 ContentTemplate H 件，以绑定到控件的 
ContentTemplate 屈性： 

<ControlTemplate TargetType="Button n > 

<Border Background:"{TemplateBinding Background)" 

BorderBrush="{TemplateBinding BorderBrush)" 

BorderThickness="{TemplateBinding BorderThickness)" 

CornerRadius="12"> 

<ContentPresenter Content^"\TemplateBinding Content\" 

ContentTemplate="{TemplateBinding ContentTemplate i " /> 


</Border 〉 

</ControlTemplate> 
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ContentPresenter 上绑定的这两个模板非常标准和重要，以至于实际根本不做要求！ 
ContentPresenter 会从使用它的控件里自动获得这些属性 的值。 如果想省略，就吋以省略。 
我个人觉得看到它们会更放心。 

你可能还记得， Control 定义了名为 Padding 的属性，旨在为控件的镶边和内容之间提 
供一些空间。我们试试在 Button 里设置 Padding 属性： 



Click=*"OnButtonClick" 

HorizontalAlignment="Center" 

Vertica1A1ignment■"Center" 

Padding="24"> 

</Button> 

什么效果都没有。你需要添加一些内容到 ControlTempiate , 以明确为 Border 和 
ContentPresenter 之间留出一些空间。可以是 Border 的 Padding 属性上的 TemplateBinding , 
但史通用的方法是在 ContentPresenter 的 Margin 属性上设置 TemplateBinding ： 

<ControlTemplate TargetType="Button n > 

<Border Background:"(TemplateBinding Background} M 

BorderBrush="(TemplateBinding BorderBrush}" 

BorderThickness-"{TemplateBinding BorderThickness}" 



<ContentPresenter Contenc="(TemplateBinding Content) w 

ContentTemplate="{TemplateBinding ContentTemplate}" 
Margin®"{TemplateBinding Padding} M /> 

</Border> 

</ControlTemplate> 






ContentPresenter 的 Horizontal Alignment 和 Vertical Alignment 属性： 

<ControlTemplate TargetType="Button H > 

<Border Background*"{TemplateBinding Background}" 

BorderBrush= M (TemplateBinding BorderBrush)" 

BorderThickness="{TemplateBinding BorderThickness}" 

CornerRadius="12"> 

<ContentPresenter Content*"{TemplateBinding Content}" 

ContentTemplate="{TemplateBinding ContentTemplate}" 

Margin-"(TemplateBinding Padding}" 

HorizontalAlignment="tTemplateBinding HorizontalContentAlignmenC}" 
VerticalAlignment=" (TemplateBinding VerticalContentAlignment)" /> 


</Border> 



这些属性在其父类里定位 ContentPresenter ， 在木例中是 Border 。 我要在 ContentPresenter 
再多加一个 TemplateBinding ， 随后声明就绪即 wj *: 

<Button Content= w Click me!" 

Click= M OnButtonClick n 
HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Padding-"24"> 

<Button.ContentTransitions> 

<TransitionCollection> 

<EntranceThemeTransition /> 



</Button.ContentTransitions> 


<Button.Style> 

<Style TargetType="Button"> 

〈Setter Property="Background" Value="White" /> 

<Setter Property"Foreground" Value= w Blue" /> 
〈Setter Property= w BorderBrush" Value="Red" /> 
<Setter Property="BorderThickness" Value="3 M /> 
〈Setter Property*"Fontsize" Value="24" /> 

<Setter Property= M Template w > 

<Setter.Value> 


<ControlTemplate TargetType= M Button •’ > 

<Border Background 55 "{TemplateBinding Background)" 

BorderBrush="(TemplateBinding BorderBrush}" 
BorcterThickness=" {TeirplateBinding BorderThickness)" 
Corne rRadius="12"> 


<ContentPresenter Content*"(TemplateBinding Content)" 

ContentTemplate="{TemplateBinding ContentTemplate}" 
Margin®"{TemplateBinding Padding}" 
HorizontalAlignment= 

"ITemplateBinding HorizontalContentAlignment J" 
Vertica1A1ignment= 

TemplateBinding VerticalContentAlignment)" 
ContentTransitions= 


</Border> 

</ControlTemplate> 

</Setter.Value> 


"{TemplateBinding ContentTransitions)" /> 


</Setter> 
</Style> 
</Button.Style> 
</Button> 


ContentPresenter 的 ContentTransitions 属性现在绑定到 Button 的 ContentTransitions 属 
性，我添加了 EntranceThemeTransition 到 Button 来进行测试。现在，如果加载 Button ， 文 
本会从右边滑入。 


11.11 视觉状态管理器 


如采你一直在定义新 Button 的视觉，可能会注 . S 到点击或者轻击 Button , 总是会触发 
Click 货件。然而， Button 无法有效向用户提供视觉反馈。禁用、获得键盘输入焦点、点击 
过程或者鼠标消过时，符通按钮苻起来都应该有鸣不同。 

这些不同外观称为视觉状态，在模板甩可以通过作为视觉状态管理器一部分的类来进 
行构建。 

Button 有两组7种视觉 状态： 

• CommonStates ： Normal 、 PointerOver , Pressed 和 Disabled 

• FocusStates ： Focused 、 Unfocused、PointerFocused 

每- - m 屮的状态均相互排斥。例如，被按卜的禁用按钮，没有视觉状态。 

通过调用 VisualStateManager . GoToState . 控件的控制代码负责把这呰控件放入状态。 
这些状态总是用文本名称进行引用。 

M 常通过模板可视树里的附加元素来实现视觉状态.这些元索一般不4见。通过和背 
景颜色、 Collapsed 的 Visibility 厲性或者为0的 Opacity 进行颜色 Iffift !， 即可实现+吋见。 
动画以该属性为14标使元蒺可见。这些动 Pi 的持续时间通常为0,也就是说瞬间发生，但 
如果你愿意，也可以延长动画。 

预先警告，负责这呰视觉状态无疑是定义模板中最货杂的部分。如果只在特定应用中 
使用控件，你吋能希望除去-•些东 W 。 例如，如果知道控件永远不会不 nj ■用，则不需要为 
此提供视觉状态= 

在我构建的 ConlrolTemplate 中，要继续处理 Pressed 、 Disabled 和 Focused 状态， 然 HI 
声明 完成。 

在标准 Button 中，用虚线 围绕按 钮的边界来表示键盘输入焦点。我耍继续把它变成虚 
线|1 ; 1绕按钮的内容来表4，也就是说它随箱 ContentPresenter 进入 Border ， lli 就是说，1#_线 
和 ContentPresenter 两者需 耍进入只 Yf _ -个中 .元格的 Grid - 用名为 focusRectangle 的 Rectangle 
来实施虚线，如 卜所•: 

<ControlTemplate TargetType="Button•• > 

〈Border Background:"{TemplateBinding Background}" 

BorderBrush-"{TemplaceBinding BorderBrush)" 

BorderThickness="{TemplateBinding BorderThickness}" 

CornerRadius="12"> 

<Grid> 

<ContentPresenter Content="1TemplateBinding Content I" 

ContentTemplate= w (Ten?>lateBinding ContentTenplate)" 

Margin="(TemplateBinding Padding)" 

HorizcfitalALignnent*" (TenplateBinding HorizontalContentAlignment)" 
VerticalAlignment='' (TemplateBinding VerticalContentAlignment)" 
ContentTransitions="(TemplateBinding ContentTransitionsJ" /> 



Stroke^"{TemplateBinding Foreground)" 
StrokeThickness="1" 

StrokeDashArray= M 2 2" 

Margin='M" 

RadiusX= M 12" 
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</Grid> 


</Border> 



adiusY="12 n 


效果如卜图所示。 



当然，你不想所冇时候都会出现 Rectangle , 冇一个方法能使 Rectangle 见，即赋 
: J *' 其为0的 Opacity : 



Stroke="{TemplateBinding Foreground)" 

Opacity= w O M 

StrokeThickness="1" 

StrokeDashArray- H 2 2 N 



RadiusY= w 12" /> 

然盾，一般都是处理吋视树中的根元#(飢成 ControlTemplate , 在本例子中紧跟在 
Border 的幵始标签之后)， VisualStateGroups 节。丨 Rlflj 有柄一组的 VisualStateGroups 标签， 
而在 VisualStateGroups 中有毎种状态的 VisualState 标签。所有都用 x : Name 属性来识别。 

<VisualStateManager.VisualStateGroups 〉 

<VisualStateGroup x : Name="Commonstates"> 

<VisualState x:Name="Normal"> 



<VisualState x : Name="Disabled'*> 
〈 /VisualState 〉 







</VisualStateManager.VisualStateGroups> 


如果基本模板的视觉部分是为 Normal 和 Unfocused 状态而设计的，则可以构造这些空 
标签。如果不希望处理各种状态，也可以使这些标签 为空： 

<VisualStateManager.VisualStateGroups> 

<VisualStateGroup x:Name="CommonStates"> 

<VisualState x:Name="Normal" /> 

<VisualState x : Name-'^ointerOver" /> 



</VisualState> 


〈VisualState x:Name:"Disabled "〉 



<VisualState x:Name="PointerFocused" /> 

</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 

但不要删除这些标签。在特定组 m , 应该有标签对应于所有状态。如果少一个，就不 
会过渡回到该状态。 

对于要处理的状态，可以在包含动画的两个 VisualState 标签之间放入 Storyboard 。 
例如： 

<VisualStateGroup x:Name="FocusedStates"> 

<VisualState x:Name="Unfocused" /> 

<VisualState x:Name="Focused"> 

<Storyboard> 

<DoubleAnimation Storyboard.TargetName="focusRectangle" 

Storyboard.Target Property="Opacity" 

To="l" Duration=' ， 0" /> 



<VisualState x:Name="PointerFocused" /> 



注意，这里没有 From 属性。你只想表明值在何处终止，而+是从何处开始。 

有了这个，如果底层控件接收到输入焦点，就会调用 OnGotFocus 方法，通过调用为 



Focused 的 VisualStateManager . GoToState -控件会做出 响应。 这样会触发 Storyboard , 而 
Storyboard 把目标 Opacity 属性设置为1。如果底层控件失去输入焦点，则调用状态为 
Unfocused 的 VisualStateManager . GoToState ， 并撤销 动幽。 

对于禁用状态，我想使整个控件都变灰，这有一个好办法，即用 Visibility 为 Collapsed 
的半透明黑色矩形来覆盖整个控件。因此，我们把 Border 放到另一个 Grid , 并给位于 Border 
上面的 Grid 添加一个已命名的 Rectangle 。 与此同时，我已经把 Visual State Manager 标记 
移到最外层 Grid ： 

<ControlTemplate TargetType="Button"> 

<Grid> 

<VisualStateManager.VisualStateGroups> 



<ContentPresenter Name="contentPresenter" ••. /> 
<Rectangle Name="focusRectangle" ... /> 



〈Rectangle Ncune="disabledRect" 

Visibility="Collapsed M 



</ControlTemplate> 

我还命名了 Border 和 ContentPresenter ， 以便在动 iffliTl 进行引用。对于 Disabled 状态， 
我定义 了动画 使 disabledRect 可见； 而对于 Pressed 状态，我定义了两个动画来设置控件的 
背景色和前景色。 

可以在 CustomButtonTemplate 项0中看到这些，项目有最终样式和模板。主要为了避 
免篇幅过长，我在 Resources 字典里已经把 ControlTemplate 定义 为单独 对象，并从 Style 
引用。 

项目 ： CustomButtonTemplate | 文件： MainPage.xaml( 片段〉 

<Page ... > 

<Page.Resources 〉 

<ControlTemplate x : Key«"buttonTemplate" TargetType="Button"> 



<VisualStateManager.VisualStateGroups> 

<VisualStateGroup x:Name="CommonStates"> 
<VisualState x:Name="Normal" /> 
<VisualState x:Name="PointerOver" /> 



<ObjectAniinationUsingKeyFrar[ies 

Storyboard. TargetName="border'' 
Storyboard.TargetProperty="Background"> 
<DiscreteObjectKeyFrame KeyTime= , '0" 

Value= M LightGray" /> 
</ObjectAnimationUsingKeyFrames> 

<ObjectAnimationUsingKeyFrames 

Storyboard.TargetName="contentPresenter" 
Storyboard.TargetProperty="Foreground"> 
〈DiscreteObj ectKeyFrame KeyTime- ,, 0" 

Value="Black" /> 


</ObjectAnimationUsingKeyFrames> 

</Storyboard> 

</VisualState> 


e= M Disabled "〉 

<ObjectAnimationUsingKeyFrames 

Storyboard.TargetName="disabledRect" 
Storyboard.TargetProperty="Visibility"> 
<DiscreteObjectKeyFrame KeyTirae="O n 

Value="Visible" /> 
</0bjectAnimationUsingKeyFrames> 
oryboard> 


</VisualState> 

</VisualStateGroup> 


<VisuaIStateGroup 
<VisualState 


^"Unfocused" /> 


<VisualState x : Name="Focused"> 

<Storyboard> 

<DDUbleAnimation Storyboard .1 

Storyboard.TargetProperty="Opacity” 
To="l" Duration="0" /> 
</Storyboard> 

</VisualState> 


<VisualState x : Name="PointerFocused" /> 
</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 


<Border Name="border" 

Background-'* {TemplateBinding Background}" 
BorderBrush="{TemplateBinding BorderBrush J" 
BorderThickness=" (TemplateBinding BorderThickness)" 
CornerRadius="12"> 


<Grid> 



Content^"{TemplateBinding Content)" 
ContentTemplate="{TemplateBinding ContentTemplate} 
Margin="(TemplateBinding Padding}" 
HorizontalAlignment="(TemplateBinding 
HorizontalContentAlignment)" 

VerticalAlignment="{TemplateBinding 
VerticalContentAlignment}" 

ContentTransitions="{TemplateBinding 
ContentTransitionsJ" /> 


<Rectangle Name="focusRectangle" 

Stroke 二 " 丨 TemplateBinding Foreground} 
Opacity=" 0 " 

StrokeThickness="l" 
StrokeDashArray="2 2" 

Margin="4" 

RadiusX= ,, 12 w 
RadiusY="12" /> 

</Grid> 

</Border> 


<Rectangle Najne="disabledRect" 


Visibility="Collapsed" 

Fill="Black" 









<Setter Property="Background" Value="White" /> 

<Setter Property*"Foreground" Value-"Blue H /> 

〈Setter Property= M BorderBrush M Value="Red" /> 

<Setter Property-"BorderThickness" Value="3" /> 

〈Setter Property="FontSize" Value="24 M /> 

<Setter Property= M Padding" Value="12" /> 

〈Setter Property="Tenplate" Value-" {StaticResource buttonTenplate)" /> 
</Style> 

</Page.Resources> 

<Grid Background®*"{StaticResource ApplicationPageBackgroundThemeBrush|"> 

<Grid•ColumnDefinitions> 

<ColumnDefinition Width-"*" /> 

<ColumnDefinition Width:"*" /> 

<ColumnDefinition Width®"•" /> 

</Grid.ColumnDefinitions> 


<Button Contents"Disable center button" 

Grid.Column®"0" 

Style= M {StaticResource buttonStyle J ** 
Click="OnButtonlClick M 



<Bucton Name="centerButton" 


Content="Center button" 
Grid.Column="l" 



FontSize="48" 

Background:’’DarkGray" 
Foreground:"Red" 
HorizontalAlignment="Center" 
VerticalAlignmentdCenter" /> 


</Page> 


<Button Content="Enable center button" 
Grid.Column="2" 

Style="{StaticResource buttonStyle)" 
Click= M OnButton3Click M 


</Grid> 




/> 


XAML 文件结尾有二个按钮，中间的按钮获取一些局部属性值用于覆写 Style。 外的 
两个按钮分别禁用和启用中间按钮。 

项 CustomButtonTemplate I 义件： MainPage.xaml-cs < 片段} 
void OnButtonlClick(object sender, RoutedEventArgs args) 
t 

centerButton.IsEnabled = false; 


void OnButton3Click(object sender, RoutedEventArgs args) 

1 

centerButton.IsEnabled = true; 


如下屏幕截图中，中间按钮被禁用，而第三个按钮则获取键盘输入焦点。 
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11.12 使用 generic.xaml 

在安装了 Visual Studio 的机器 h 査看以下 H 录： 

C:\Program Files ( x 86 )\Windows Kits \8 .0\ lnclude \ winrt \ xaml\design 

应该会看到两个 文件。 较小文件为 themeresources . xaml . : t . 要包含 SolidColorBrush 定 
义，用于供 Windows Runtime 应用使用的标准颜色，包括著名的 
ApplicationPageBackgroundThemeBrush 和 ApplicationForegroundThemeBrush 颜色。整套颜 
色分为三部分: Default (即黑色主题)、 Light 和 HighContrast 。 用户可以从 Ease of Access 小 
节选择高对比度敁示，而从电脑 Settings 程序以访问 Ease of Access 。 

较大文件为 generic . xaml . 包含和 themeresources.xaml 一样的定义，还有为所有标准控 
件定义的默认 Style 和 ControlTemplate 定义。 

如果你想捎 L < :为控件设〖 I •自定义模板，则有必要研究 generic . xaml 的默认模板。在这 
些模板里. Hi 是(显然)和毎个控件相关的视觉状态的唯一文档以及命名部分， F —节会进 
行讨论。 

要找到特定控件的默认 Style , 可以通过 Ta r g e tType =" 后面加 h . 控件名称的方式进行 
搜索。 

模板通常引用在 generic . xaml 开头定义的副笔，而+同视觉状态各自都有特殊的画笔。 
例如，在默认 Button 模板里，视觉状态动画用名称引用画笔，比如 
ButtonPressedBackgroundThemeBrush 和 ButtonPressedForegroundThemeBrush 。 根据应用所 
选 Light 或 Dark 屮题、以及用户 Kf 以选择的 HighContrast t -: 题，画笔的实卩示颜色小同。 

所有标准控件的 Style 定义没冇键名。控件实例化时，堪木 h 是应用于控件的隐式样式。 
应用提供的其他仟何内容都是对该隐式样 忒的 补充。 

为控件开发新模板有一个好 办法： 直接把所有现冇 Style 定义从 generic . xaml 复制到你 
U 己的 XAML 文件，然后再开始修改。 
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11.13 模板部分 


在我引导你为 Button 构造模板的整个过程中，你可能想知道它是如何处理更复杂的控 
件的。以 Slider 为例。 Slider 有可移动部分，底层控件如何引用模板的这些部分？ 

诸如 Slider 之类控件的底层代码会假定组成模板的某个元素具有特定名称。在初始化 
过程中，通过这些名称调用 GetTemplateChild 方法覆写 OnApplyTemplate 方法，控件代码 
从而引用这些元素。控件代码可以把这些元素对象保存为字段，给元素安装事件处理程序， 
并改变其属性，而用户可以操纵控件。 

不幸的是，这些已命名部分还没有显示在任何 Windows Runtime 文档中。你得研究 
generic . xaml 的默认模板，才能从中找到它们。许多情况下，并不需要了解其中的每一个。 
如果模板中的某些部分丢失了，但不会引发异常，则可以认为控件正确。 

为了达到最基本的必要功能， Slider 模板必须包含水平和垂直方向的模板。这些申-独模 
板一般为 Grid 类型。 可以把它们命名为 “ HorizontalTemplate ” 和 “ VerticalTemplate ” 。 

每个 Grid 必须有一个 Rectangle(Rectangle 包含名为“ HorizontalTemplate ” 或 
“ VerticalTemplate ” 的完整 Slider , 毎个 Grid 还必须有名为 “ HorizontalThumb ” 或 
“ VerticalThumb ” 的 Thumb ) 以及第二个 Rectangle (出现在 Thumb 左边，并命名为 
“ HorizontalDecreaseRect ” 或“ VerticalDecreaseRect ”）。 用户操作 Thumb 、 点击或轻击 Slider 
内的任何地方时，底层控件会改变第二个矩形的大小，以反映 Slider 的值。 

我们来看一个几乎是最小功能的 Slider 模板，模板包含几个显式属性设置并忽略了提 
供可选刻度线的 TickBar 元索。我把该项目称为 BareBonesSHder 。 


项目 ： BareBonesSl ider I 文件 ： Main Page, xaml (>»*&) 



<Grid Name»"HorizontalTemplate" 
Background= H Transparent" 



<ColumnDefinition Width*"*” /> 
</Grid.ColumnDefinitions> 



Grid.Column="0" 

Grid.ColumnSpan»"3" 

Fill»"Blue" 

Margin*"0 12" /> 



Grid•Column="1 


DataContext-"{TemplateBinding Value}" 
Width="24" /> 


<Rectangle Name="HorizontalDecreaseRect" 










</Grid> 


<Grid Name="VerticalTemplate" 
Visibility="Collapsed" 
Background="Tcansparent" 
Width="48"> 


<Grid.RowDefinitions> 

<RowDefinition Height="*" /> 
〈RowDefinition Height="Auto" 
<RowDefinition Height="Auto" 
</Grid.RowDefinitions> 


/> 

/> 


<Rectangle Name="VerticalTrackRect" 



Grid.F 


DataContext=" 
Height="24" /> 


Valuer ， 


<Rectangle Name=-"VerticalDecreaseRect" 
Grid.F 


/> 


</Grid> 

</Grid> 

</ControlTemplate> 
</Page.Resources 〉 



ApplicationPageBackgroundThemeBrush}" 


<RowDefinition Height="Auto" /> 
<RowDefinition Height-"*" /> 
</Grid.RowDefinitions> 


〈Slider Grid.Row="0" 

Template^"(StaticResource sliderTemplate)" 

Margin="48" /> 

<Slider Grid.Row= M l" 

Template="{StaticResource sliderTemplate)" 

Orientation="Vertical" 

Margin="48" /> 

</Grid> 

</Page> 

XAML 文件结尾有两个 Slider 控件，一个横向， 个 纵向，两者都引用这些 模板。 

我耍描述横向 Slider 模板，纵向的结构与之类似。 

名为 HorizontalTemplate 的 Grid 的总宽度为布局中 Slider 控件的宽度。 Grid 有三列。 
名为 HorizontalTrackRect 的 Rectangle 跨越三列，因此， Rectangle 的宽度总是等于 Slider 
自身的宽度。名为 HorizontalTrackRect 的 Rectangle 占据 Grid 的第一列，宽度为 Auto , 能 
把 Rectangle 的减少到0宽度。 Thumb 占据 Grid 的中间一列，宽度同柞为 Auto , 也就是说 
该中间列为 Thumb 的大小。 

底层代码只允许 Thumb 水平移动，而且不能超过 Slide 的限制。如果用户操纵 Thumb 、 
按或轻 _itf Slider 的仟何位 1 R ， 底居代码会相成 设贾 HorizontalDecreaseRect 元素的 Width 
属性。滑块的最小值，宽度属性设 H 为0:消块的大值，设腎为将 HorizontalTrackRect 
元桌的宽 度减上 Thumb 的宽度。我给出了这些飢件的大小和边界，因此 Thumb 比矩形大 





-点点(见 K 图)。 



注 M ， 模板包含一个 TemplateBinding . 它把 Thumb 的 DataContext 绑定到 Slidei ■的 Value 
厲性。这是让 Slider 弹! li 式工具提示用 FM 示正确值所需要的。 

在 BareBonesSlider 里操作 Thumb 的时候，你会发现如果按压， Thumb 几乎会变成透 
明黑色。 Thumb 派生自 Control ， W 此 " J * 以被赋广自己的模板。这是在 Resources 节的默认 
Slider 模块中完成的，而 Resources 附_ T •模块的最外眉 Grid 。 

只要对 BareBonesSlider 程序做一点小小修改，就可以做出一鸣花哨的东我把以卜 
代码称为 SpringLoadedSlider 。 


项 II: SpringLoadedSlider 


j.xaml 段） 


<ControlTemplate x: Key=•• s 1 iderTemplate" 
TargetType= M Slider "： 

<Grid> 




</Style> 


Height: ■• 


remplate" 

sparent" 


lumnDefinit 
laranDefinit 


<ColaranDefinition Width="Auto" 
<ColumnDefinition Width="Auto" 
<ColumnDefinition Width="*" /> 
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Grid.Column="0" 
Fiii ， "Ti:ansparent" /> 


<Path Stroke="Red M 

Grid.Column="0" 

Width®"{Binding ElementName=Horizontalt)ecreaseRect, 
Path=Width} M 

Data="M 0 0 L 100 100, 200 0, 300 100, 400 0, 

400 100, 300 0, 200 100, 100 0, 0 100 Z" /3 

<Path Stroke="Blue" 

Grid.Column= w 2 M 

Data="M 0 0 L 100 100, 200 0, 300 100, 400 0, 

400 100, 300 0, 200 100, 100 0, 0 100 Z" /> 


' i 1 ^ y -' v ^-''' -^^ : ： ■:- w 鐵 ' 7 w , 


Grid.Row="0" 

Grid.RowSpan="3" 





•’vemcaiuecreaseKect” 


“•Transparent** 


〈Path Stroke= n Red" 
Grid.Row="2" 


400, 


=VerticalDecreaseRect, 
Path=Height} w 

100, 0 200, 100 300, 0 400, 
iOO, 100 200, 0 100, 100 0 Z" /> 



0 L 100 100 
400, 0 300, 


200 , 

) 200 , 


0 300, 

100, 1 


400, 


</Grid> 

</ControlTemplate> 

e.Resources> 


- Background:’’ {StaticResource ApplicationPageBackgroundThemeBrush J" 
<Grid•RowDefinitions> 

<RowDefinition 
<RowDefinition Height:" 

</Grid.RowDefinitions> 
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<Slider Grid.Row="l" 

Template*"{StaticResource sliderTempiate ) 
Orientation*"Vertical" 

Margin= n 48" /> 

</Grid> 

</Page> 


除了赋予 Rectangle 元素 Transparent 的 FHl 颜色外，两个模板的结构相同。此外，两 
个 Path 添加到毎个模板。第一个 Path 位]•第一列(水平滑块)，颜色力红色。该 Path 的 
Width 绑定到名为 '* HorizontalDecreaseRect " 的乂素的 Width - 第：个 Path 为蓝色，占据第 
三列。毎个 Path 都有相同几何结构(纵横交错的晶格)， Stretch 模式为 Fill , 也就是说，吋 
以填充的 空间。 

Thumb 两边的弹簧外观，如卜图所示。 



ProgressBar 的默认模板相，精巧，因为需耍包含确定的和小确定的外观。然而，如果 
你限制为只包含确定的 ProgressBar . 事情就会变得非常简中：底层代码改变名为 
ProgressBarlndicator 元素的宽度，范从0到名为 DeterminateRoot 元秦的宽度。在默认模 
板 HI，DeterminateRoot ')•} Border . 包含左对齐的名为 ProgressBarlndicator 的 Rectangle 。 

在 SpeedometerProgressBar ' il . DeterminateRoot 和 ProgressBarindicator 均为不可见， 
但 DeterminateRoot 的 Width 6)1! 编码为 180。也就是说 ， ProgressBarindicator 的 Width 范闲 
从0到 180- ProgressBarindicator 的 Width M 性的绑定以 RotateTransform 的 Angle 性为 
H 标，从0到180度旋转一个箭头指承器= 

项 H: SpeedometerProgressBar I 文件： MainPage.xaml ( 片段 > 

<Page ... > 



<Gtid.Resources> 

<Style TargetType="Line "〉 



</Style> 

</Grid.Resources 〉 


〈Border Width="270" Heights"120" 

BorderBrush="{TemplaCeBinding BorderBrush}" 
BorderThickness="{TemplateBinding BorderThickness}" 
Background="White"> 

<! — Canvas for positioning graphics--> 

〈Canvas Width»"0" Height= ,, 0" 

RenderTransform="l 0010 50" > 

<!-- The required parts of the ProgressBar template --> 
<Border Name="DeterminateRoot" 

Width= n 180"> 

<Rectangle Name="ProgressBarIndicator" 

HorizontalAlignment="Left" /> 

</Border> 


<Line RenderTransform=" 1.00 0 
〈Line RenderTransform=" 0.95 0 
<Line RenderTransform=" 0.81 0 
<Line RenderTransforra=" 0.59 0 
<Line RenderTransform=" 0.31 0 
<Line RenderTransform=" 0.00 1 
<Line RenderTransform="-0.31 0 
〈Line RenderTransform="-0.59 0 
〈Line RenderTransform="-0.81 0 
<Line RenderTransfonn="-0.95 0 
〈Line RenderTrans£orm="-l.00 0 


00 

-0.00 

1.00 0 O' 

/> 

31 

-0.31 

0.95 0 0, 

/> 

59 

-0.59 

0.81 0 0* 

/> 

81 

-0.81 

0.59 0 O' 

/> 

95 

-0.95 

0.31 0 O' 

/> 

00 

-1.00 

0.00 0 O' 

/> 

95 

0.95 0 

.31 0 0" 

/> 

81 

o.8i a 

.59 0 0 M 

/> 

59 

0.59 0 

•81 0 0" 

/> 

31 

0.31 0 

•95 0 0" 

/> 

00 

0.00 

•00 0 0" 

/> 


<TextBlock Text="0% H Canvas.Left="-115" Canvas.Top-"-6" /> 
<TextBlock Text="20%" Canvas.Left="-104" Canvas.Top="-65" 
<TextBlock Text="40%" Canvas.Left="-42" Canvas.Top="-105" 
〈TextBlock Text="60%" Canvas.Left="25" Canvas.Top]"-105" /> 
<TextBlock Text-"80%" Canvas.Left="82" Canvas.Top="-65" /> 
〈TextBlock Text="100%" Canvas.Left="100" Canvas.Top="-6" /> 

<!-- Arrow to point to percentage —> 

〈Polygon Points="5 55-5 -75 0" 

Stroke="Black" 

Fill="Red"> 

<Polygon.RenderTransform> 

<RotateTransform 

Angle="(Binding ElementName=ProgressBarIndicator, 
Path=Width} M /> 

</Polygon.RenderTransform> 

</Polygon> 

</Canvas> 

</Border> 

</Grid> 

</ControlTemplate> 

</Page.Resources 〉 
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<ProgressBar Grid.Row="0 M 

Template="(StaticResource 
Margin=”48" 

Value:'M Binding 


<Slider Name="slider" 



</Page> 

XAML 文件的 结尾用 该模板实例化 ProgressBar , 并为了测试0的绑定到 Slider (见 
糊)。 



SpringLoadedSlider 和 SpeedometerProgressBar 堪丁•我 i 3 初为一篇 WPF 文章所 创达的 
XAML 文件.该文章发表 f -2007 年 llj 的 MSDN 杂志。虽然我耑耍改变模板的一些东两 
来说明 WPF 和 Windows Runtime 之间的差异，但大多数怙况下两#部非常相似。 M 然我们 
还没有完成所苻祛于 XAML 环境的 Pf 移桢性，似六年前完成的这项 I . 作吋以很容易适应新 
平台。 


11.14 自定义控件 

如果作 Windows Runtime 库中创辻自定义控件，你会想让该控件能够用于各种应用程 
序，甚辛能出饵给其他序员。在这种情况 K , 应该为控件提供默认 Style , 包括默认 
ControlTemplate 。 

包含 tl 定义控件类的库也;、 V: 该在 Themes 文件灾中包含名为 generic . xaml 的文件。就像 
你 l _ L 经符过的 generic.xaml 文件，该 generic.xaml 义件 fj •个 ResourceDictionary 根元素， 
同时包含 TargetType 的 Style 定义，表明 C 3 定义控件名称，并且没有卞典键。该 Style 应该 
包含默认 ControlTemplate 0 

Visual Studio 会牛•成 generic . xaml 文件框架。本章 L ； •经使 用过的 
Petzold . ProgrammingWindows 6. ChapterlI 库里，我激活了 “添加新项” 话框并选择“模 
板控件”，将其命名为 NewTogglec Visual Studio 生成了 NewToggle . cs 文件，包含很多 using 
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指令及以下类 定义： 

namespace Petzold.ProgrammingWindows6.Chapterl1 

l 

public sealed class NewToggle : Control 

{ 

public NewToggle() 



这不是一个分部类定义！没有相应的 NewToggle.xaml 文件，构造函数也不包含调用 
InitializeComponento DefaultStyleKey 属性表明搜索隐式样 K 时所使用的类型。 

Visual Studio 还生成了 Themes 文件夹和 generic.xaml 文件，包含该隐式样式： 

<ResourceDictionary 

xmlns="http: "scheinas.microsoft.com/winfx/2006/xainl/presentation" 

xmlns:x="http://schemas.microsoft.com/winfx/ 2006 / xaml" 
xmlns:local="using:Petzold.ProgrammingWindows6.Chapter11"> 

<Style TargetType-"local:NewToggle"> 

<Setter Property="Template M > 



<ControlTemplate TargetType="local:NewToggle"> 

<Border 

Background:"{TemplateBinding Background}" 

BorderBrush="[TemplateBinding BorderBrush}" 

BorderThickness-"ITemplateBinding BorderThickness}"> 

〈 /Border 〉 

</ControlTemplate> 

</Setter.Value 〉 

</Setter> 

</Style> 

</ResourceDictionary> 

如果库里有多个自定义控件，同一个文件中就会还包含它们所有的默认 Style 定义。该 
文件有特定名称和位置，是因为文件会永远关联到库里所定义的自定义控件，而且不需要 
通过任何其他方式进行 引用。 

NewToggle 控件旨在通过在同一时刻展示两段不同内容来实现触发按钮的功能，一段 
内容关联未选中状态，另一段关联到已选中状态。可以轻击其中一段来改变选中状态 。视 
觉效果如何变化以反映变化由模板负责。 

我从 ContentControl 派生 NewToggle ,这样 NewToggle 可以继承 Content 和 
ContentTemplate 属性。 NewToggle 定义了两个新的依赖属性，分别为 CheckedContent 和 
IsCheckedo 

项月： Petzol.ProgrammingWindows6.Chapterl 1 I 文件： NewToggle.es 

public class NewToggle : ContentControl 

{ 

public event EventHandler CheckedChanged; 

Button uncheckButton, checkButton; 


NewToggle() 


CheckedContentProperty 
typeof(object), 
typeof(NewToggle), 


DependencyProperty.Register("CheckedContent" 




IsCheckedProperty = DependencyProperty.Register("IsChecked", 
typeof(bool ), 
typeof(NewToggle) # 

new PropertyMetadata(false, OnCheckedChanged)); 


public NewToggle() 














void OnCheckedChanged (DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 


•GoToState (this. 


--- - - - 竇 “ .tv i -^r '-.1 -Vi JC --- - ---- - - 










OnApplyTemplate 港写会假设模板有两个 Button 控件，名为“ UncheckButton ”和 
“ CheckButton ” 。 如果是这样，它们会被保存为字段，并附加 ll Click 处理程序。如果点 
击其中一个，就会改变 IsChecked 厲性，触发 CheckedChanged 事件，并 FI 调用静态 
V isualStateManager.GoToState . 其状态为 “|J ■选中”或“未选中”。 

generic.xaml 中的模板包含两个按钳，也带有这些名称以及为两个状态定义的 
Storyboard 对象。 

项目： Petzold.ProgrammingWindowsll .Chapter 11 I 文件： generic.xaml < 片段） 

<Style TargetType="local:NewToggle"> 

<Setter Property="BorderBrush" Value=" | StaticResource ApplicationForegroundThemeBrush}" /> 
〈Setter Property="BorderThickness" Value= M l" /> 

<Setter Property="Template"> 

<Setter.Value> 

<ControlTemplate TargetType="local:NewToggle"> 

<Border Background="ITemplateBinding Background}" 

BorderBrush="(TemplateBinding BorderBrush)" 


<VisualStateManager.VisualStateGroups> 

<VisualStateGroup x:Name="CheckStates"> 
<VisualState x:Name*"Unchecked" /> 



Storyboard.TargetProperty*"BorderThickness M > 
<DiscreteObjectKeyFrame KeyTime= n O M 

Value- M 8 M /> 

</ObjectAnimationUsingKeyFrames> 



</VisualStateGroup> 



<local : UniformGrid Rows="l"> 

<Button Name-"UncheckButton" 

Content="(TemplateBinding Content)" 
ContentTemplate="(TemplateBinding ContentTemplate > 
FontSize="(TemplateBinding FontSize)" 
BorderBrush-"Red" 

BorderThickness= M 8" 


Horizontal Alignment St retch" /> 


<Button Name="CheckButton" 

Content="(TemplateBinding CheckedContent)" 
ContentTemplate="{TemplateBinding ContentTemplate}" 
FontSize***(TemplateBinding FontSize}" 
BorderBrush="Green" 

BorderThickness="0" 

HorizontalAlignment="Stretch" /> 
</local:UniformGrid> 

</Border> 

</ControlTemplate> 
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i 己住，在更广泛的模 板甩， 两个按钮本身吋以模板化。两者包含绑定到 Content 和 
CheckedContent 厲性的模板，并共享控件中的相冋 ContentTemplate 。 Li 选中项用粗边框咼 
亮显示，左边按钮为红色，而心边为绿色。 

NewToggleDemo 项目演示了 NewToggle 控件。 

项 H: NewToggleDemo | 文件： MainPage. xaml ( 

<Page ... > 



〈Setter Property="HorizontalAlignmenc" Value="Center" /> 
<Setter Property="VerticalAngnment M Value="Center" /> 

</Style> 

</Page.Resources 〉 

<Grid Background*"(StaticResource ApplicationPageBackgroundThemeBrush)"> 
<Grid.ColumnDefinitions> 

<ColumnDefinition Width="*" /> 

<ColumnDefinition Width-"*" /> 



CheckedContent="Let's go for it!" 



<chl1 : NewToggle Grid.Column="l"> 

<chll:NewToggle.Content> 

<Image Source="Images/MunchScream.jpg" /> 
</chll:NewToggle.Contents 

<chl1:NewToggle.CheckedContent> 

<Image Source®"Images/BotticelliVenus.jpg" /> 
</chl1:NewToggle.CheckedContent> 

</chll:NewToggle> 



</Page> 

第一个 NewToggle 包含两个文木字符串，处 P 未选中状态。第二个 NewToggle 用『两 
张名 W 來表氺两种状态，0前状态为匕选中。 
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第13章将提供另外一个自定义控件 XYSlider 的例子〃 

如果在单个应用中使用自定义控件，就可以在应用项目里定义控件，默认模板可以放 
入用于控件分部类定义的 XAML 文件。 

11.15 模板和条目容器 

模板化 ItemsControl 派生类(比如 ListBox ), 和模板化其他类型的控件非常类似，只不 
过模板会包含 UemsPresenter 元素。基本上，我们用占位符来代表项列表，而不需要模板绑 
定。正如査看 ListBox 默认模板可以看到的，模板的大部分是 ScrollViewer 。 如果你发现编 
码能更好或者吏适合应用，则可以在 ListBox 里替换 ScrollViewer 。 

轻击或点击 ListBox 条目，或者使用键盘方向键在列表里导航，所选项会被卨亮 M 示。 
高亮显示从何而来？谁负责？ 

实际执行高亮 M 示的类属 P ContentControl 派生类的分类，我还没有讨论到。这些控 
件均派生自 Selectorltem ： 

Object 

DependencyObject 

UIElement 

FrameworkElement 

Control 

ContentControl 

Selectorltem (非可实例化） 

ComboBoxItem 

FlipViewItem 

GridViewltem 

ListBoxltem 

ListViewItem 

映射到派生自 Selectoi •的可实例化的这五个类，正如本章前面所示，用丁•在条 LI 控件 
中控制单个条 P 。 ItemsControl 没有条 U 类，因为不能选中条目。 

你还没看到这些类，因为通常你不会自己进行实例化。相反， Selector 控件自身负责生 
成条目。这些类派生自 ContemControl ， 因此有自己的默认模板(由 generic . xaml 定义)，而 
这些模板都涉及 ContentPresenter 。 

假设你想提供不同类型的选择高亮。怎么做？怎么对甚至都没有见过的 ListBoxltem ^ 
应用样式？ 

ItemsControl 定义了一个 ItemContainerStyle 属性，可以设置为 Style 对象。例如，如果 
要处理 ListBox ， 你 Kf 以用带 ListBoxltem 的 TargetType 的 Style 。 而该 Style 可以包括 
Template 属性的设置。 

如果看看 generic . xaml 中的默认 ListBoxltem 样式，就就会看到一个 SelectionStates 视 
觉状态组，它包含六个互斥状态: Unselected 、 Selected > SelectedUnfocused 、 SelectedDisabled > 
SelectedPointerOver 和 SelectedPressed 。 
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如果想让所有选中状态都一样，可以定义模板以反映选中状态，然后可以为 Unselected 
状态定义 Storyboard ， CustomListBoxltemStyle 项目使用了这种方法。除了额外包含设置为 
ItemContainerStyle 属性的 Style , 该项目和 ListBoxWithltemTemplate 项目是相类似的。 

项 R: CustomListBoxltemStyle I 文件： MainPage.xaml { 片段） 

<Page ... > 

<Page.Resources 〉 

<chl 1 : NamedColor x:Key sa "nameciColor" /> 

</Page.Resources 〉 


<Grid> 

<ListBox Name="lstbox" 

ItemsSource="{Binding Source-iStaticResource namedColor}, 
Path=All} M 


Width="380 M > 



</DataTemplate> 
</ListBox .】 


<ListBox.ItemContainerStyle> 

<Style TargetType="ListBoxItem"> 

<Setter Property="Background" Value="Transparent" /> 

<Setter Property-"TabNavigation" Value="Local" /> 

〈Setter Property="Padding" Value»"8,10" /> 

<Setter Property="HorizontalContentAlignment" Value="Left" /> 
<Setter Property*"Template"> 

<Setter.Value> 

<ControlTemplate TargetType=•• ListBoxItem"> 

〈Border Background="{TenplateBinding Background}" 
BorderBrush=" i TesrplateBinding BorcterBrush}" 
BorderThickness 3 '' {TenplateBinding BorderThickness)"> 


<VisualStateManager.VisualStateGroups> 

〈VisualStateGroup x:Name="SelectionStates"> 
<VisualState x:Name="Unselected"> 



<ObjectAnimationUsingKeyFrames 

Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="FontStyle"> 
<DiscreteCbjectKeyFrame KeyTime= ,, 0" 
Value="Normal" /> 



<ObjectAnimationUsingKeyFrames 

Storyboard. TargetName="ContentPresenter" 
Storyboard.TargetProperty="FontWeight"> 
<DiscreteObjectKeyFrame KeyTime="0" 
Value="Normal" /> 
</ObjectAnimationUsingKeyFrames> 



<VisualState x : Name="Selected" /> 
〈VisualState x:Name= H SelecteclUnfocused n /> 
<VisualState x : Name="SelectedDisabled" /> 
〈VisualState x:Name="SelectedPointerOver" /> 
<VisualState x:Name="SelecteciPressecl" /> 



<Grid Background="Transparent"> 

<ContentPresenter x : Name*"ContentPresenter" 
FontStyle="Italic" 
FontWeight» M Bold" 
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Content = ••丨 TemplateBinding Content 
entTransitions= 

"t TemplateBinding ContentTransitions|' 


"(TemplateBinding ContentTemplate)" 
HorizontalAlignment* 

"(TemplateBinding HorizontalContentAlignmentJ■ 
VerticalAlignment= 

"{TenplateBinding VerticalContentAlignment)" 
Margin= " 丨 TemplateBinding Padding/> 



</Style> 



<Gr id. Background 

<SolidColorBrush Color=*M Binding El 
</Grid.Background> 



</Grid> 

</Page> 


/> 


Style 设 l 1 .为 ListBox 的 ItemContainerStyle , 当然吋以定义为资源。我决定把一个选中 
项 Mi 为? [I 斜体文木，所以定义了 CorUemPresenter 的 FontStyle fll FontWeight 的屈性。如 
果没有选抒项(其实是正常情 况)， FontStyle 和 FontWeight 通过动_得到||:常状态。效果如 
卜图所示。 


I cuiMiiuweioiui； 

I— 



这种岛焭条 y 的方式相当奇怪，似是对坫些应用而言，⑷•能饵的旧$: 小; /常的高亮 
方式。 

模板的典正 II 的并+是为了 u : 控件史小 •/ 常(尽管的确有 趣)， 而是让控件吏冇用，即 
让控件的视觉效果和 1 j 功能相适应。 

卜 '一 章继续讨论如何使用 ListViewBa.se 派中.类 (ListView 和 GridView) 控件条 11 并通过 
视图模^探索控件来使 ffl 。 




第 12 章页面及导航 

大多数 Windows 8应用程序都足11绕若 Page 类实例而构迮的。这当然+是要求的，但 
能提供-些便利，例如轻松集成应用栏。在木草之前的内容中，我关注的程庁•只有一个 Page 
派牛类 MainPage 的实例，但现作是时候探索吋以在多个 Page 派生类中类似 Web 导航的程 
序了。 

Visual Studio 有两个用于多页面应用的项 Li 模板，称为 Grid App 和 Split App 。 两个模 
板_绕强大的 ListView fll GridView 控件而构 建， 并通过视图模取使用控件。两个模板也 
可以感知布局，也就是说，如果屏筋方向和辅屏模式改变了，模板就会响应，因此，这 *P. 
顺现成章地将探索窗口大小调粮 H 题作为木尕 内奔的 开头。 

响应窗 U 大小变化对 Windows 枵序员来说不是新鮮事。大多数传统 Windows 桌曲程 
序都冇大小4变的边界，用户能对大小 和应用 窗口的 K 宽比进 行大鼂 控制。 Windows 程序 
员已 经被教 W / 25年，深知所写程序要能适应用户所选的仟何大小。当然.这样并非总是 
亍： 在电子表格程序屯，如果用户缩小窗 U , —苠到看不见中.元格，会怎么样？一鸣程 
序(比如 Windows II •算 器) 会芮接设定一个同定窗口大小，足以砧不•程序所有内容。对丁-传 
统的兑 ifti 应用程序而 , 7 , 如果耍确保窗口小 r 屏幕， 只有这 么做才合适。 

Windows 8应用多数以全屏模式运行， 实阿 l -./ i : 获収 M 小屏®尺 I 方而有吏大的保证。 
然 Iftf , Windows 8应用也容易受到方向和屏模式变化的影响.许多应 ffl 都会注意到这哗 
变化。 


12.1 屏幕分辨率问题 

电脑屏錄有特定的水平和乖良像#大小，而屏幕的物理大小通常用测 fft 对角线所得的 
英十数来表示。 M 过勾股定理， 可以 结合这哗大小 il •烊出每英 十的 像素分辨率，也称力每 
英寸点数 ( DPI )。 

例如， 1024 X 768 像尜的屏锫，其对角线为1280像#。如果 W •嵇对角线为12英 、 h 
则分辨率为106 DPI 。 23英寸的桌面监视器,其标准高度定义为 1920 X 1080 像素,对角线 
约为2203像#, 96 DPI 分辨率。27英、 t 的! bU : 器，分辨率 2560 X 1440像#,约 109 DPL 

本书前面说过,叫以把屏幕分辨率假设为每英寸96像素。正如你所看到的,在上面三 
个例子的 w . 示器中，该假设就 m 适用，尽管 你⑴能 会遇到 w 术器会按规则有所 延伸： 对丁- 
木15的大部分内界，我一直在使 dj : 厘平板 电脑，其像蒺为 1366 X 768, 对角线约为 11.6 
英寸，1567像索,分辨率为135 DPI 。 如果在该屏幕 h 画一个％像索的正方形,我想让它 
有一平方英寸，接近7/10英寸的正方形。 

96 DPI 的假设通常不适用于•有大量像索的小屏幕。例如,考虑有一个 10.6 英寸的屏潘, 
1920 X 1080 像袭。该射嵇分辨率为208 DPI . 而程序员所认为的一英寸实际 I . M 示小到半 
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英寸。文本变得更小，尽管因为像素密度髙，文本仍然可读，但可能无法提供足够大的触 
控目标。 

出于该原因 ， Windows 8试图通过对应用相当透明的方式以弥补高分辨率屏锱，如果 
一个屏幕的像素大小为2560 X 1440或更高，而物理大小(例如12英寸)就会为240 DPI 分辨 
率或更高， Windows 会把应用使用或遇到的坐标和尺寸调整到180%。 2560 X 1440 的屏幕 
会用 1422 X 800 像素来显示应用 程序。 

如果屏幕没那么卨的像素密度，而像索为 1920 X 1080 或吏大，但其物理尺、 j — 又小到会 
导致174 DPI 分辨率或更高 ， Windows 8会调整所有像素尺寸到140%,因此， 1920 X 1080 
显示看起来像是 1371 X 771 像素。 

记住，这些自动调整只出现在屏辂物理尺寸很小但像索很多的情况 K 。 如果屏幕物理 
尺寸很大，分辨率低于174 DPI , 则+会调整，因此应用会是全尺、 J 。 

Windows Runtime 将假定 视频显 示分辨率称为“逻辑 DPI ” 。一般情况下，逻辑 DPI 
为96,但对于高像索密度的显示器，逻辑 DPI 可以是 134.4( 即96 DPI 放大到140%)或 
172.8( 即96 DPI 放大到 180%). 

我们来看#逻辑 DPI 是如何工作的。 WhatRes 程序类似〗•首次在第3章介绍的 WhatSize 
程序，但除了 S 示窗口大小(同贞面一样大小)， WhatRes 还要获取屏幕分辨率信息。 

WhatRes 甩的 XAML 文件直接初始化 TextBlock ： 


项目 ： WhatRes I 文件 Main Page, xaml < 片段 } 
<Grid Background="(StaticResource App. 
<TextBlock Name»"textBlock M 

HorizontalAlignment="C€ 
VerticalAlignment="Cent 
FontSize="24 , * /> 


licationPageBackgroundThemeBrush)' 


代码隐藏文件为 iiilfli 的 SizeChanged 事件设置处理程序，也为 Windows . Graphics.Display 
命名空间里所定义的 DisplayProperties 类的静态 LogicalDpiChanged 诉件设置处观程序。 

项目 ： WhatRes I 文件： MainPage.xaml.es ( 片 段） 
public sealed partial class MainPage : Page 
l 

public MainPage(> 

{ 

this.InitializeComponent <); 

this.SizeChanged += OnMainPageSizeChanged; 

DisplayProperties.LogicalDpiChanged += OnLogicalDpiChanged; 

Loaded += (sender, args)=> 

{ 

UpdateDisplay(); 


'/ SizeChangedEventArgs 



UpdateDisplay() 


double logicalDpi = DisplayProperties.LogicalDpi; 

int pixelWidth - (int)Math.Round(logicalDpi * this.ActualWidth / 96); 
int pixelHeight = (int)Math.Round(logicalDpi * this.ActualHeight / 96); 

textBlock.Text * 

String.Format("Window size * (0) x (1)\r\n" + 

"ResolutionScale = {2)\r\n" + 

"Logical DPI - {3}\r\n" + 

"Pixel size = {4} x {5»", 

this.ActualWidth, this.ActualHeight, 

DisplayProperties.ResolutionScale, 

DisplayProperties.LogicalDpi, 



现实中不会经常激活 Display Properties . Logical DpiChanged 事件，因为如果程序正在运 
行，视频显示器就不会改变像素大小或物理尺寸。然而，如果 Windows 8电脑附加了第二 
个显示器，就吋能激活该事件，因为两个显示器有不同逻辑 DPI 设置，所以程序会从一个 
显示器跑到另一个显示器。 

WhatRes 程序通过页面的 ActualWidth 和 ActualHeight 属性来获取窗口大小，然后根据 
DisplayProperties . LogicalDpi 设置来计算实际像素大小。 

在 1366 X 768 的平板电脑上运行该程序，如下图所示，对于本书大部分内容，我一直 
都使用这个平板电脑。 



Logical DPI = 96 
Pixel size = 1366 x 768 


像本书的大多数屏幕截图一样，该屏幕截图 Li 经缩放到35%的像素大小，以适 合本书 
篇幅。 

为了写这本书，我还一直用一台 1920 X 1080 的显示器， 21.5 英寸，实际分辨率为102 
DPI 。 下图是程序在屏嵇 I :的运行效果。 
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Window s.z« = 1920 » 1080 



该屏幕截阁的像素 大丁前 酣的截图，因此.我不得不把它变成到25°/。，以便能放入本 
页的相同位置。在现实中，无论是在平板电脑或大屏幕上运行该程序，文本大小都一柞， 
但相对于大屏箱，文本则较小，表明应用有一个更大的区域供其运行。 

WhatRes 能够很好在 Windows 8模拟器里运行，你…以在 Visual Studio 的标准工具栏 
取选抻 Windows 8模拟器。该模拟器允许在某些 普通坫 示器尺寸下运行 WhatRes 。 例如， 
在一个模拟的 1920 X 1080, 10.6 英、 J ■显水器上运行 WhatRes , 如 f 图所示。 


Window size = 1371.42858886719 x 771.428588867188 
ResolutionScale = Scale! 40Percent 



和前®的屏幕截图一样，该屏幕截图已经缩放到25%以适应本页篇幅。对于 Windows 
8应用，窗口尺寸为 1371 X 771 像索，所有文本和图形将基于此大小而进行显示。汁算所 
得的像桌大小 和显示 器的像素尺、 j •相匹配。正如你所见，18点文木相对于 1366 X 768 敁示 
器似乎占据相同区域。 

在模拟的2560 X 1440像素、 10.6 英寸的屏幕 h 运行 WhatRes , 如下图所示。 
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ResolutionScalc • Scale! 80P*fC*nt 


gical DPI » 172.8 


该屏幕截图己经缩放到19%,以便能复制到本页，但请再注意，应用认为屏幕大小非 
常接近 1366 X 768 像素，而文本占据了屏幕的同样相对区域。 

现在，在一个物理尺寸很大的显示器 h 运行模拟器。像素尺十也是 2560 X 1440. 但模 
拟屏幕大小是27英寸，因此没有进行调幣(见下图)。 


像前面的屏幕截图一样，我不得不把大小减至19%,文木会敁得非常小。然而，文本 
在27英寸显示器看起来大小合理，而小文本真正表明的是应用在更大的平台 h 如何有更大 
的空间。 


12.2 缩放问题 

Windows 程序员习惯于以像系•为中.位处理咁标和尺寸。正如你所见，如果在离像素密 
度的小物理屏幕 h 运行程序， Windows 会报据显示大小和分辨率，按140%或180%对來标 
和大小进行缩放。 

因此，与其说用像 蒺画画 或进行大小控制，+如吏正确说是用与设备无关的单位 ( DIU ) 



或简称为 units 中.位进行处理。一些人把这些单位称为与设备无关的像素，但我觉得很 矛盾。 

在下表中，第一列显示的是在程序里画圃或者改变大小所使用的笮位，其他列显示如 
何转换为视频显示器的实际像素。 



你可以自己继续填下去。 

该图表 M 示的是如果大小和爭标乘以五单位倍数，这呰单位转换为整数像素。这种积 
分转换有时可以帮助保持图形的保真度。 

Windows 进行这些调粮时，会缩放文本和矢 ® 图形而+会损失分辨率。例如，如果指 
定20的 FontSize , 程序在180%比例分辨率上运行，则所得字体不会是放大180%的20像 
m . 有锯齿或模糊。得到的是真正平滑的36像蒺 FontSize 字体。 

但位图不同。位图有特定像素大小，如果要 M 示实际像桌 大小为 200像素平方的位图， 
除了把图像放到为140%或180%, Windows 没有其他选抒，位图会变得大，但会变得模糊。 

为了避免该 H 题，坷以用三个不同尺寸来创逑位图(例如，200像素平方、280像素平 
方、360像素平方)以供应用使用。甚至可以把这些图像存储为程序资产，让 Windows 自动 
选择正确的一个！ 

AutoImageSelection 项 El 演示了如何实现上述内容。我用了一张分辨率相当高的位图， 
剪哉为2304像索平方大小。然后，我把图片调整了 三次： 640像素平方、896像素平方和 
1152像索平方。三张图对应三个分辨率比例： 640的140%是896像素，640的180%是1152 
像素。我还用 Windows iBi 板在毎张图片中嵌入一些文本，用来表明实际像素大小。我必须 
使用三种不同文本大小，使文字在三个图片中大小大约相同。 

我通过两种不同命名约定，分两次把三张图添加到 AutoImageSelection 项 U 两个不同 
的文 件夹下 ，如卜 •图 所示(在 Visual Studio Solution Explorer 中〉。 







在 〖magesl 文件夹里，三个位图赋予不同 名称。 注意，句点把 “ scale - 100”、 “ scale -140”、 
“ scale - 180” 和 “ PetzoldTablet ” 名称及 “ jpg ” 扩展名分开了。 

在 Images 2 目录里，三个位图有相同的名称，但它们是分别在表明缩放的1个+同子 
文件夹里。 

在两种情况下, scale - 100位图为640像素平方, scale - 140位图为8%像素平方, scale - 180 
位图为1152像素平方。 

MainPage.xaml 文件包含两个 Image 元素，引用 Images I 和 Images 2 IJ 录中的一张位图。 
在两种情况下，文件名或文件路径部分表明这些路径没有 缩放： 


项 H: AutoImageSelection | 文件： MainPage.xaml ( 片段 > 



<Colunu\De£inition Width®"*" /> 
<ColumnDefinition Width="*" /> 


</Grid.ColumnDefinitions 〉 

<Image Source**"Images 1/PetzoldTablet.jpg" 



HorizontalAIignment="Center" 
VerticalAlignment= M Center" /> 

<Image Source="Images2 / PetzoldTablet.jpg" 
Grid.Column*"1" 



Height="640" 

HorizontalAlignment»"Center" 
VerticalAlignment="Center" /> 

</Grid> 


注意，两个 Image 元素被赋予明确的 Width fll Height 设置，对应100%位图的像紊大 
小。 这至关重要！不要 指規为 None 的 Stretch 模式会强制 Image 元素正确执行缩放。 

我在三个+同的 10.6 英寸(模拟)显示器上运行程序。(如果在 Windows 8模拟器上运行， 
不要在程序运行时切换分 辨率。 而要先终 lh 程序，切换分辨率，然后再运行程序。 )1366 X 768 
M 氺器 I :的运行效果，如 卜图 所示。 



X 768屏幕截图在本页 


缩放至35%。 
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屏辂截图大小为19%,但在实际 W 不器 中，位图像袭和屏幕像系•之间不会像这柞一 
对应。 

如果在相同物理大小的屏倍上运行程序，位图应该也有相冋物 ffl 大小，就像例 f 所氺 
那柞。 fli 位阁谊 染在更 高粘度的屏嵇 h 效果会史好， Ui 和例子一样。在史大物理 尺十的 V 
尔器匕 图像相对丁-屏幕小得多，似物理尺、 j 大致相 N 。 

12.3 辅屏视图 

.台 Windows 8的机器至少需要 1024 X 768 像素的 M 示器来运行 Windows Store 应用。 
敁 小器尺 寸宽岛比为4:3,和20世纪50年代期的宽屏电影相一致，也和宽屏之前的传统 


在920 X 1080、 10.6 英寸的显示器 I 二运行程序(见 F 图)。 


该屏幕截阁大小为25%以适 合木奴 大小。尽管 Windows 8应用程序认为这个! nUV 有 
1371 X 771 像袭大小，896像#平方的位图 LJ •选 屮，以其原大小 V 示： 位图的每个像 疾对应 
一个显示像素 •》 

在2560 X 1440, 10.6 英十对角线的 W 氺器 h 运行该程序(见 F 图)。 


896 pixels I 1896 pixels 






电视和电脑显示器相 一致。 

在平板电脑匕屏幕可以进行横屏和竖屏模式切换，闽此.机器上运行的应用也会遇 
到768 X 1024 的敁示尺寸。 但在这么大小的显氷器上 ， Windows Store 应用只需要处理两个 
尺寸。 

下一•步是设置 1366 X 768 记示尺寸，宽卨比约为16:9,与高清电视相符。 该® 示为 
768 X 1366 的竖屏模式。 

此外， 1366 X 768 是支持辅屏模忒的最小显示 尺寸。 辅屏模式允许两个程序共享屏辂， 
但只能横屏用。 

Windows . UI.ViewManagement 命名空间包含 Application View 类，带名为 Value 的静态 
厲性，该属性为 ApplicationViewState 类型，即表明应用当前辅屏模式的枚举项。没有事件 
与此信息相对应。如果更改视图时需要通知程序，则需要在 SizeChanged 处理程序检杳 
该值。 

除/包含 ApplicationView . Value 属性， WhatSnap 程序其他的部分都很像 WhatRes 。 

项目 ： WhatSnap | 文件： MainPage.xaml.cs ( 片段） 

void UpdateDisplay(> 

( 

double logicalDpi = DisplayProperties.LogicalDpi; 

int pixelWidth = (int)Math.Round(logicalDpi * this.ActualWidth / 96); 

int pixelHeight = (int)Math.Round(logicalDpi * this.ActualHeighC / 96); 

textBlock.Text = 

String.Format("ApplicationViewState = {0}\r\n" + 

"Window size = (1) x {2}\r\n M + 

"ResolutionScale - (3»\r\n M + 

"Logical DPI = <4)\r\n M + 

"Pixel size * (5) x (6» n , 

ApplicationView.Value, 

this.ActualWidth, this.ActualHeight, 

DisplayProperties.ResolutionScale, 

DisplayProperties.LogicalDpi, 
pixelWidth, pixelHeight); 

) 

此外， TextBlock 在 Viewbox 里，这样一来，即便屏铬太窄， TextBlock 也仍然是 wj * 见 
的。 

项 R: WhatSnap | 文件： MainPage.xaml < 片段） 

<Grid Background:"IStaticResource ApplicationPageBackgroundThemeBrush)"> 

<Viewbox Horizonta!Alignment-"Center" 

VerticalAlignment= M Center" 

StretchDirection-"DownOnly" 

Margin="24"> 



ApplicationViewState 枚举有四项。在竖屏模式下，唯一适用的是 FullScreenPortrait , 

如 K 图所示。 
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为 



辅屏模式只在横屏中发挥作用。如果应用占据整个屏幕，则 ApplicationViewState 的值 


Full Screen Landscape. 如下图所4。 


ApplicationViewState = FullScreenLandscape 
Window size = 1366 x 768 
ResolutionScale * ScalelOOPercent 
Logical DPI = 96 
Pixel size = 1366x768 


如果手指扫过屏幕左边缘，4以得到示其他应用的柱状图。如果拖动手指，就吋以 
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把另一个程序带入局部视阁。此时， ApplicationViewState 会变成 Filled , 如卜图所尔。 



注意，4；持辅屏模式的最小屏嵇大小 1366X768, 而 FiUed 大小为 1024X768, 这就是 
运行 Windows Store 应用的最小尺、 j •屏幕。 

进•步向石拖动程序朽 ， ApplicationViewState 会变成 Snapped , 如卜图所示。 



只有四种"『能。如果应用在左边而+是在右边，会得到相同的 Snapped 值， 如卜图 
所示。 
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继续把程序栏拖到右边，程序会再次进入 Filled 模式，如下图所示。 



Snapped 视图总是为320单位宽，而 Filled 视图总是为屏铬总宽度减去其他应用的320 
单位，冉减去拖拽栏的22单位。 

例如.如果在 2560 X 1440 像素、 10.6 英寸显示器 h 运行程序，那么屏«总宽度为1422 
单位， Filled 模式分到1080单位， Snapped 模式分到320申-位，而分隔符占22单位。 

如果在 2560 X 1440 像索，27英寸敁示器 h 运行该程序， Dm 和像桌•是一样的。屏幕 
的总宽度为2560中.位，分配给 Filled 模忒2218申位、 Snapped 模乂 320单位、分隔符22 
单位。 

在 Filled 模式下，程序可以通过加上320和22的宽度确定 DIU 的全屏幕人小。通过进 
一步牿合逻辑 DPI 设置，程序吋以用像素来确定全屏嵇尺、 j 。 

因为显示模式的数量非常有限(特别是因为 Snapped 模式总是320中. 位宽) 我们期望定制 
应用，能适应每个模式。正如你所见， Bing 的天气应用为 Snapped 投:式调整了每日天气预 
报 ¥. 示。 然而，一般都不太可能耑要为 Filled 模 A 调襥应用。 
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改变 StackPanel 的方向是处理 Snapped 模式的一种简单方法，而另一种方法是对 Grid 
的行和列采取一鸣小技巧，正如第5章中 OrientableColorScroll 程序所演 示的。 在木章稍后 
的挚节中，你会#到4以在 敁氺项 集合的 GridView 和 ListView 之间进行切换。 

但很 M 然，没有适合于毎个应用的解决方案。这确实是一个问题，需要申独解决。 
ApplicationView 类有静态的 Try Unsnap 方法， TryUnsnap 试图不对前台应用采取辅屏， 
m 并不鼓励使用这种方法，而 r 很难想到这样做的理由。 


12.4 横屏和竖屏的变化 

在让应用适应 Filled 模式和 Snapped 模式的同时，也耍让应用适应横屏模式和竖屏模 
式。即使你相信应用只运行在桌曲电脑 h , 而从+在平板电脑上运行，也应该要意识到一 
些桌 tfll 敁示器能翻转成为竖屏模式.从事大最写作的人喜欢这种敁示器。 

通过前如几章的描述，你己经知道 ApplicationView . Value 属性表明 
ApplicationViewState . FullScreenPortrait 枚举项的竖屏模式，但如果你需要吏多信息(比如你 
肖-欢让件告知方向改变了），你会想用 Windows . Graphics . DisplayProperties 命名空间的 
Display Properties 类。这和提供逻樹 DPI 缩放信息的类相同。 

Windows . Graphics.DisplayProperties 命名空间定义 DisplayOrientations 枚举，有5项， 
如下所示，括号里为 其值： 

• None (0)» 仅用 P Display Properties . AutoRotationPreferences 

• Landscape ( 1 )，从 PortraitFlipped 顺时针旋转 90 度 

• Portrait (2)，从 Landscape 顺时针旋转90度 

• LandscapeFlipped (4>，从 Portrait 顺时针旋转90度 

• PortraitFlipped (8>，从 LandscapeFlipped 顺时针旋转90度 

这爪提到的“顺时针旋转90度”是指用户将平板电脑(或电脑屏嵇)顺时针旋转90度。 
正如 你看到的 ， Windows 8会自动响应，将反向旋转屏幕内容以保持方向相同。 

静态 DisplayProperties . NativeOrientation 域性表明屏幕的“原生”或“最自然”方向。 
可以是 Landscape 或 Portrait , —般通过设备的按钮或标识位置进行控制。静态 
DisplayProperties.CurrentOrientation 可以为任何非零值 

如果 CurrentOrientation (用 户旋 转屏®的 结果) 或 NativeOrientation 发生变化，就会触发 
Displayproperties . OrientationChanged 亊件，而如果应用是从一个显示器较移到另一个显示 
器，则很少发生变化。应用启动时，无 i 仑屏铬最初是什么方向，都不会触发 
OrientationChanged 事件，闽此，在程序初始化时就复制 OrientationChanged 事件处理是一 
个好主怠。 

NativeUp 程序中的 XAML 文件显示了一个向上箭头。 

项目 ： NativeUp I 文件： MainPage.xaml ( 片段 } 

<Grid Background*"[StaticResource ApplicationPageBackgroundThemeBrush J"> 

<StackPanel HorizontalAlignment» H Center" 

VerticalAlignment="CenCer n 
RenderTransform0rigin="0.5 0.5"> 

<Path Data= n M 100 0 L 200 100, 150 100, 150 500, 50 500, 50 100, 0 100 Z" 
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Fill- M Red" 

RenderTransformOrigin*"0.5 0.5" 

HorizontaiAlignment="Center" /> 

<TextBlock Text-"Native Up" 

FontSize= M 96" /> 

<StackPanel.RenderTransform> 

<RotateTransform x : Name="rotate" /> 

</StackPanel.RenderTransform> 

</StackPanel> 

</Grid> 

在正常情况下，如果在平板电脑 h 运行该程序，并用手旋转平板电脑， Windows 8会 
改变 M 示方向，这样箭头方向总是向上，或如果有90度旋转增最，箭头方向几乎也总是 
向上。 

然而，该特定程序的代码隐藏文件通过 OrientationChanged 饵件来抵消旋转。结果是， 
箭头总是朝着电脑顶部，就好像程序并不会受到横竖屏变化的影响。 

项 NativeUp I 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 

public MainPage() 

i 

this.InitializeComponent(); 

SetRotationO; 

DisplayProperties.OrientationChanged += OnOrientationChanged; 

\ 

void OnOrientationChanged(object sender) 

( 

SetRotation(); 

} 

void SetRotation() 


rotate.Angle 


(Log2(DisplayProperties.CurrentOrientation ： 
Log2(DisplayProperties.NativeOrientation) 1 


Log2(DisplayOrientations orientation) 



例如，假设以原生方向启动程序。箭头会向上。顺时针90度旋转平板。 Windows 会 
把程序逆时针调粮90度进行 ® 新定位，但 OrientationChanged 处理程序会将文本和箭头按 
顺时针旋转90度。因为屏幕会略有缩小，但仍然吋以#到横贤屏发牛了变化，而箭头方肉 
相对于屏幕却并没有改变。 

程序依赖 DisplayOrientations 枚举项顺时针旋转值丨、2、4和8»以2为底的对数值是 
0、丨、2和3,每增加1,就相当 丁顺时 针方向％度的变化。 



应用可以请求特定所需方向。有两种方法可以做到这一点。可以在 Visual Studio 打开 
Package . appmanifest 文件，选择 Application U 1 标签，并选择四个方向中的 一 个或多个，如 
下图所示。 


Supported rotations; 


An optional setting that indicates the app.s ( 




I 1 Landscape 


f~l Landscape-flipped □ Portrait-flipped 


不管选择什么，它都会成为静态 DisplayProperties . AutoRotationPreferences 属性的初始 
值。但在程序初始化时，可以通过 C # 按位 OR 运算符(|)把属 性设置 为一个或多个 
DisplayOrientations 枚举项。 

这里的关键词是“偏 好 ”。 Windows 8会忽视请求。例如，如果要求应用只在竖屏模 
式下运行，但程序恰巧运行在横屏的台式电脑匕程序就会在横屏模式下运行。即使应用 
运行在平板电脑上，而平板电脑正为横屏模式的扩展中，应用只能继续以横屏运行。 

换句话说，如果偏好不能在当前环境中发挥作用 ， Windows 8就会覆写程序偏好。这 
么做是合 理的： 不管程序想要什么，都不应该让用户侧着头看屏幕。 

我建议避免指定横竖屏偏好，而应该通过代码让程序适应所有方向。唯一可能的例外 
是涉及基于位图图形的游戏，必须以特定方式为方向，或还会涉及到使用方向传感器的程 
序，比如在第18章所提到的程序。 

但请记住，把程序限制到特定方向可能会让用户感到困惑。例如，假设要求程序运行 
在横屏模式，但是程序正在已锁定为竖屏模式的平板电脑上运行。在正常情况下，用户手 
指滑过屏幕的左边或者右边，会激活应用切换器或符号栏。如果程序运行在横屏模式下， 
而平板电脑为竖屏模式，则用户必须滑过屏幕的顶部和底部来调用应用切换器或符号栏， 
而这两项特性会显示在侧而，因为两者和当前应用的方向一样。 

12.5 简单页面导航 

到目前为止，本书中几乎所有的应用都是围绕着类的单一实例而构建，该类为 
MainPage , 派生自 Page 。 MainPage 的实例设置为 Frame 类型对象的 Content 属性，而 Frame 
对象设置为 Window 类实例的 Content 属性，我们还没有注意这一点。 

可以在标准 App 类的 OnLaunched 方法中肴到该层级。实际代码(在本章稍后 章节) 会检 
査错误，并确保只进行一次初始化，但基本上都只在简甲.情况中 执行： 


Window.Current.Content = rootFrame; 
rootFrame.Navigate(typeof(MainPage), 


.Arguments); 


Frame 派生自 ContentControl ， 但 +能直 接设置 Content 属性。而 Navigate 方法会接受 
引用 Page 派生类的 Type 参数。 Navigate 方法实例化该类型（本例中为 MainPage ), 而该实 
例成为 Frame 对象的 Content 属性以及用户交瓦的主要焦点。 

在程序中，也可以用 Navigate 方法从一个页面跳转到另一个页面。 Navigate 有两种版 




本： OnLaunched 方法中的版本传递-些数据给 Page 对象，但其他版本并+这样。（在木 
章稍后你会看到这是如何工作的。） 

Page 类可以非常方便地定义 Frame 属性， 因此， 在 Page 派生类中，奵以像卜凼这样 
调用 Navigate ： 

this.Frame.Navigate(pageType); 

在多奴面应用中， " j 以运用各种 Page 类型的参数调用多次 Navigate 。 在其内部 ， Frame 
类维护访问过的页如堆栈。 Frame 类还定义了 GoBack 和 GoForward 方法以及 bool 类型的 
CanGoBack 和 CanGoForward 属性。 

SimplePageNavigation 项II包含两个而不是一个 Page 派生类 。我 对该项 tl 继续用 Blank 
App 模板，因此，如往常一样由 Visual Studio 创 JiMainPage 类。为了往项 H 中添加另一个 
Page 派生类，我从 Project (项 tl) 菜单中选择 Add New hem (添加新项)，然后从相应的对话 
框中选择 Blank Page (空 白页） 而+是 Basic Page (基本贞）。我把新的页类命名为 
SecondPage 。 

SimplePageNavigation 项丨 I 演4如何通过各种方法在之间! U ' ifli 进行4.相导航。 
MainPage . xaml 实例化 TextBlock 用来识别页面，实例化 TextBox 用来输入一些文本，并实 
例化三个按钮，按钮上面的文本分别为 “Go to Second Page” 、 “Go Forward ” 和 “Go Back ' 

项 R: SimplePageNavigation I 文件： MainPage.xaml ( 片段 > 

<Page ... > 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<StackPanel> 

<TextBlock Text="Main Page" 

FontSize= ,, 48" 

Hor i zont a 1A1 ignment=" Center’’ 

Margin="48" /> 

<TextBox Name="txtbox" 

Width»"320" 

HorizontalAlignment="Center" 

Margin="48" /> 

<Button Content:"Go to Second Page" 

HorizontalAlignment="Center" 

Margin='M8" 

Click="OnGotoButtonClicJc" /> 

<Button Name="forwardButton" 

Content-.’Go Forward" 

HorizontalAlignment="Center" 

Margin:"48" 

Click="OnForwardButtonClick H /> 


HorizontalAlignment="Center" 
Margin*"48" 

Click="OnBackButtonClick" /> 


</StackPanel> 

</Grid> 

</Page> 


代码隐藏文件通过 OnNavigatedTo 溲写使得 forward 和 back 按钮可用，但它依赖的是 
Frame 定义的 CanGoForward 和 CanGoBack 厲性。二个 Click 处理程序调用 Navigate (引用 
SecondPage 对象 )、 GoForward 和 GoBack 。 
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项月： SimplePageNavigation | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 

t 

public MainPageO 

{ 

this.InitializeComponent(); 

) 

protected override void OnNavigatedTo(NavigationEventArgs args) 

forwardButton.IsEnabled = this.Frame.CanGoForward; 
backButton.IsEnabled = this.Frame.CanGoBack; 

) 

void OnGotoButtonClick(object sender, RoutedEventArgs args) 

( 

this.Frame.Navigate(typeof(SecondPage)); 

> 

void OnForwardButtonClick(object sender, RoutedEventArgs args) 

( 

this.Frame.GoForward(); 

) 

void OnBackButtonClick(object sender, RoutedEventArgs args) 

{ 

this.Frame.GoBack(); 


除了通过 OnGotoButtonClick 方法迂航到 MainPage , SecondPage 的其他部分究全相同。 

项 FI: SimplePageNavigation I 文件： SecondPage. xaml.cs ( 片 段） 
void OnGotoButtonClick(object sender, RoutedEventArgs args) 

{ 

this.Frame.Navigate(typeof(MainPage)); 


首次运行程序，效果如下图所示。 



前后翻 K 的按钮都不吋用。如果点击 Go to Second Page 按钮，柷序会导航到如下阁所 
示贞; 而。 
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Go Back 按钮现在 " J * 用，会把你带回到 MainPage。Go to Second Page 的作用也一样， 
但有区别：如果按 Go Back 按钮回到 MainPage ， Go Forward 按钮则可用 ， Go Back 按钮 
+ Kf 用。如果按 Go to Second Page 按钮 ， Go Back 按钮 耐用而 Go Forward + " J * 用。 

在探讨细节之前，我想先向你展水另一种方法，能让 Go Forward 按钮和 Go Back 按钮 
" J 用。 Frame 的 CanGoBack 和 CanGoForward 属性可以绑定源： 

<Page ... Name=**page.’> 

<Button Name="forwardButton" 

IsEnabled="IBinding ElementName=page, Path=Frame.CanGoForwardJ" 


<Button Name="bac kButton" 

IsEnabled="I Binding ElementName=page, Path=Frame.CanGoBack} 


</Page> 


这枰便 吋以去除 程序对 OnNavigatedTo 方法的需要.但实施贞面导航的任何程序都吋 
能利用该方法的其他用途以及其同伴 OnNavigatedFrom 方法。 

如果试试 SimplePageNavigation ， 点击不同按钮进行导航，前进、后退和在遇到的神个 
TextBox 中输入几个字符，你会发现一个電要的导航特征。你会发现，无论什么时候从一 
个! U ' lfn 到另一个!(不管是调用 Navigate , GoForward 还是 GoBaclc 方法).文本框中初始 
都均为 空白。 也就是说，每次点击按钮，都会创 5 J ! 新的 MainPage 或 SecondPage 实例。无 
论在文本框中输入什么都会丢失，因为 Li 经抛弃了包含 TextBox 的 Page 实例。 

这多少有点让人惊讶。你可能期 M 按卜 Go to Main Page 或 Go to Second Page 按钮会创 
建新实例，但也"丨能期望按下 Go Forward 或 Go Back 按钮导航回到贞血之前的实例。但事 
实并非如此，无论如何，都是在创建/新实例。 

Page 类定义三个虛拟方法来协助贞谢处理导航。•:个虚拟方法分别为 OnNavigatingFrom 、 
OnNavigatedFrom (注意这个方法名称中的时态区 别！） 和 OnNavigatedTo 。 如果能记录调用 
这飞个方法、 Page 类的构造函数以及 Loaded 和 Unloaded 車件的激活，就能从中发现一个 
页面跳转到另•个页面过程的顺序，如下所示。 
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From Page 

OnNavigaiinpFrom 


OnNavigate(if»oo^ 


OnNavtgatedTo 


无论员面跳转是 Navigate 、 GoForward 还是 GoBack 的结果，都会产生以上顺序。 

直到这一章，我们一直让 MainPage 存于应用运行中，就好像把 MainPage 作为唯一的 
Page 派生类。然而，一旦开始处理多页面应用程序，就需要考虑创建和丢弃 Page 派生类。 
构造多个 Page 派生类是一个好主意，这样在 OnNavigatedTo 或 Loaded 期间， Page 派生类 
可以附加事件处理程序并获取资源，而在 OnNavigatedFrom 和 Unloaded 期间则吋以分离事 
件处理程序并释放这些资源。 

无论页面导航到哪里，想创建 Page 派生类的新实例 M 然都很容易，因为这是默认发生 
的事情。如果你喜欢有些不同，可以有两种选择，一个非常容易，而另一个不那么容易。 

简单方法是把 Page 的 NavigationCacheMode 属性设置为其他值，不是设置为枚举项默 
认的 Disabled 。 例如： 

public MainPage() 

l 

this.InitializeComponent()? 

this.NavigationCacheMode = NavigationCacheMode.Enabled; 

) 

另一个选项是 Required , 但对于该程序， Enabled 和 Required 的作用 一样。 如果对 Page 
对象设置 Enabled 或 Required , 毎个 Page 派生类只有一个实例被创建和缓存，不管 Navigate 、 
GoForward 或 GoBack 发生什么效果，毎次访问该页面，都会重用该实例。方法调用和事件 
发牛的顺序与前面所示第一次导航到某个特定贞面类型的表一样：随后顺序是一样的，但 
没有构造函数。" I 以给不同 Page 类设 S 不同 NavigationCacheMode 厲性。 

这种选项可能适合“中心”架构， MainPage 导航到若千不同二级贞 | M , 二级页面可以 
回到 MainPage 。 Enabled 和 Required 之间的区 别是： 如果缓存页的数 m 超过 Frame 的 
CacheSize 属性， Enabled 可能会导致丢弃实例化的贞面，其默认值为10,小过可以变。 

然而，在一般情况下，你可能想创建新实例以用于 Navigate 调用，而把现有实例用于 
GoForward 和 GoBack 。 这种方法也有简中.的属性设背方法，稍后我会向你展示怎么做。 


12.6 返回堆栈 


Web 浏览器有 Back 按钮，但没有 Forward 按钮。浏览器实现 Back 按钮功能的方式非 
常简中.，即通过熟知的称为“堆栈” （ stack) 的数据结构来保存访问过的页面。在浏览器环 
境中，称为“回退栈” （Back Stack): 每当浏览器导航到新页面，就把前一页压到找中。每 
当用户按 Back 按钮，浏览器就会从栈中弹出页面并导航到该页面。如果堆栈为空，则禁用 
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Back 按钮。 

实现 Forward 按钮会使上述过程复杂化。浏览器并+通过栈来保存访问过的页面，而 
需要有序列表。（然而，该列表通常仍然称为回退栈。 ） 列表包括当前页。无论何时浏览器 
导航到新®面，新页面就会添加到列表末尾。然而.如果用户按下 Back 按钮，并没有从列 
表中移除所导航页 面。 该页 面必 须保留在列表中，因为 用户可 能会按卜 Forward 按钮。 

例如，用户可能从 Page Zero 奴1&'开始，导航到 Page One ， 然后是 Page Two、Page Three 、 
Page Four 和 Page Five 。 回退如下所示，最新最近的页面在顶部，箭头所指为当前坂 面： 



现在，假设用户按四次 Back 按钮，则当前页面为 Page One : 



Page Three 
Page Two 
Page One • 


用户然后按 Forward 按钮，则当前页面为 Page Two ： 



显然，通过 Back 和 Forward 按钮，用户可以在六个页曲中任意导航。如果当前页面到 
达底部，则禁用 Back 按钮。如果当前奴面到达顶部，则禁用 Forward 按钮。 

但现在假设用户从 Page Two 导航到 Page Six 。 则必须丢弃一部分完整列表。被丢弃部 
分之前保存用来点击 Forward 按钮，但这些取面+能再导航到新页面： 


Page Six — 
Page Two 



现在 Forward 按钮被禁用。只有当用户按下 Back 按钮，才会重新扁用 Forward 按钮。 
Frame 类在内部维护着 L 1 访问页面的回退栈。然而，应用+能 访问回 退栈， M 至不能 
获得其大小。 

但只要在回退找中获取 BackStackDepth 属性，就可以获得当前! Jilfli 位置。如果应用开 
始运行，并导航到初始斑面， BackStackDepth 会报告零值。在前所示的四个例子中， 
BackStackDepth 分别等于5、1、2和3。 

BackStackDepth 是非常重要的信息，因为有了它.特定页面类可以唯一性标识其&身 
的特定实例。我们来看看是怎么回車。 
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12.7 导航事件和页面恢复 

在正常情况卜，如果程序调用 GoBack 或 GoForward 返回特定页面，你想让用户看到 
和之前访问过 贸面 一样的内容。你己经知道小 能臼动实现： 如果把 NavigationCacheMode 
设置为默认值 Disabled , 调用 GoBack 和 GoForward 总会导致创建特定 Page 类的新实例。 
如果设 W 为 Enabled 或 Required , 则会秉用现有 Page 类实例，不过同时也欺用于 Navigate 。 

如前所述， Page 类定义了涉及导航的三个廉拟方法。调用 OnNavigatingFrom 幵始一 
个导航序列，这种方法并不常用。事件参数为允许取消导航的 NavigatingCancelEventArgs 
类型。 

在从一个页_导航到另一个页面的过程中（无论是调用 Navigate . GoBack 还是 
GoForward 的结果），第一个贸 ifii 的 OnNavigatedFrom 后面紧跟着第二个页' 面的 
OnNavigatedTo 调用，两个方法都有 NavigationEventArgs 类型的事件参数。这些事件参数 
用于其他情况(比如 WebView 类)，因此，使用这两种覆 M 时有一部分属性无关。导航事件 
有以下三大重要属性。 

• object 类型的 Parameter 厲性。这是 Navigate 方法 Kf 选第二个参数的设 S ， 用丁•把 
数据从一个页面传到另一个页面。稍后将进一步讨论这个过程。 

• Content 和 SourcePageType 属性总是指要被导航到的奴面。 Content 对象为 Page 
派生类的实际实例，而 SourcePageType 为该实例的类型——也就是说 ， Navigate 
调用的第一个参数创建该页面。该信息只对 OnNavigatedFrom 覆写有真正价值。 
在 OnNavigatedTo 覆写中， Content 属性等同丁•该值，而 SourcePageType 等同 〒• 
调用 GetType 。 

• NavigationMode 属性为 NavigationMode 枚举项，枚举项还有 New 、 Refresh、Back 
和 Forward 。 由 Navigate 方法发起的该导航値为 New 或 Refresh 。 如果页面导航到 
本身，该值为 Refresh ， 如果导航由 GoBack 或 GoForward 方法发起，该值则分别 
为 Back 或 Forward 。 

力 Navigate 调用创建新的页 ifii 内容(即 NavigationMode 为 New 时)且该页之前米被访 
问过 及用户未通过 Back 或 Forward 导航， NavigationMode 厲性是实现这一架构的关键。 

Page 派生类首先定义一个字段来保存和恢复 状态： 

Dictionary<string, object> pagestate; 

使用该字典的方式 W 第 7 章所演示的 PrimitivePad 程序中 ApplicationData 丄 ocalSettings 
宁-典的使用方式是一样的。然而，应用冉次运行时，没有保存 Application . Suspending 货件 
和恢复期间的应用设 S , 而是在 OnNavigatedFrom 覆写时保存贞 ftl 状态到字典中，并在 
OnNavigatedTo 时进行恢复。 

什么是页血状态？ 一般是由用户输入并从输入中得到的仟何 结果： 复选框、单选按钮、 
潸块，尤其是文木输入状态。在我使用的范例应用中，真汜歌要的! Ulfri 状态只有 TextBox 
的内容。 吋以在 OnNavigatedFrom 时用键名 保存： 

pageState.Add("TextBoxText", txtbox.Text); 
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可以在 OnNavigatedTo 时进行 恢复： 

txtbox.Text = pageState["TextBoxText"] as string; 

TextBox 肯定还有其他可能的属性是你想要保存和恢复的（比如 SelectionStart 和 
SelectionLength ). 但现在让我们保持简申-。 

除非为每个导航事件实例化 Page 类，否则在字典里保存和恢复页曲状态的过程完全没 
用，因为 pageState 的新实例会被创建为新页曲的一部分！你需要的是把该字典实例保存到 
另一个字典中，而后者定义为静态，以便页面的所有实例都可以 共享： 

static Dictionary<int, Dictionary<string, object» pages; 

字典里的值是我称为 pageState 的 Dictionary 实例。该字典键是 BackStackDepth 的值， 
因而不同 pageState 字典都叮以关联到回退栈 ffi 页实例的固定位置。 

如果要让多个页面派生类使用同样的技巧，可以在 Page 派牛类中定义两个字典，而 
Page 派生类则作为其他页面的基类。应用中的所有页面都可以共享静态 pages 字典。 

我们来看看上述内容在一个简中-应用中是如何「.作的。 VisitedPageSave 程序定义了 
个名为 SaveStatePage 的类。我用简中.的 Class 模板来创建类：没有 XAML 文件与之关联。 
SaveStatePage 类派生自 Page , 两个宁-典都定义为 protected , 这样派牛.类都 u 了以访 问:. 

项目 ： VisitedPageSave | 文件： SaveStatePage.cs ( 片段） 

public class SaveStatePage : Page 

{ 

protected Dictionary<string / object> pageState; 

static protected Dictionary<int, Dictionary<string, object 》 pages = 
new Dictionary<int, DictionaryOtring, object»(); 


静态字典在其定义中进行实例化(或者也可以在静态构造函数中进行实例 化)， 而实例 
字典则+是这样。你会看到，如果 NavigationMode 为 New , 则会在 OnNavigatedTo 覆写时 
实例化实例字典。 

我直接在 SimplePageNavigation 里创建 Second Page 类，但在 Main Page 和 Second Page 
的 XAML 文件和代码隐藏文件中，我把基类从 Page 改成 SaveStatePage 。 否则 ， MainPage 
和 SecondPage 在 SimplePageNavigation 甩是一样的。两个代码隐藏文件基本上彼此相同。 
MainPage . xamI . cs 敁示了之前按钮 Click 处理程序的同一个实现。 

项目 ： VisitedPageSave | 文件： MainPage• xaml .cs < 片段） 
public sealed partial class MainPage : SaveStatePage 
{ 

public MainPage() 


void OnGotoButtonClick(object sender, RoutedEventArgs args) 
( 

this.Frame.Navigate(typeof(SecondPage)); 


void OnForwardButtonClick(object sender, RoutedEvenCArgs args) 







this . Frame • Go ForwardO; 


void OnBackButtonClick(object sender, RoutedEventArgs args> 

{ 

this.Frame.GoBackO ; 

) 

) 

NavigationCacheMode 保留了默认设置 Disabled , 这样一来，在所有导航事件期间都会 
实例化新页面。 

在 OnNavigatedTo 覆写里，静态字典的整数键是 BackStackDepth 厲性。如果 
NavigationMode 不为 New , 方法会直接使用该键获得 pageState 字典，以对应回退栈中的位 
W , 然后使用 pageState 字典来初始化页面，在本例中为 TextBox 。 

项 R: VisitedPageSave | 文件： MainPage.xaml.cs 《片 段） 

protected override void OnNavigatedTo(NavigationEventArgs args) 

// Enable buttons 

forwardButton.IsEnabled = this.Frame.CanGoForward; 
backButton.IsEnabled = this.Frame.CanGoBack; 

// Construct a dictionary key 

int pageKey = this.Frame.BackStackDepth; 

if (args.NavigationMode !二 NavigationMode.New) 

( 

// Get the page state dictionary for this page 
pageState = pages[pageKey]; 

// Get the page state from the dictionary 
txtbox.Text = pageState["TextBoxTexf'J as string; 


base.OnNavigatedTo(args); 

) 

然而，如果 NavigationMode 为 New ， 我们就知道调用 Navigate " J * 以到达该！而見 
应该把该页面视为新的未初始化豇血。这个额外的逻辑发生在 SaveStatePage 里 
OnNavigatedTo 的实现中，你会注意到调 W /〗： MainPage 和 Second Page P . OnNavigatedTo 
重写结束时进行的。以下代码创建新的 pageState T 典并将它添加到静态 pages 字典。 

项 H: VisitedPageSave I 文件： SaveStatePage.cs ( 片段） 
public class SaveStatePage : Page 


protected override void OnNavigatedTo(NavigationEventArgs args) 

if (args.NavigationMode — NavigationMode.New) 

// Construct a dictionary key 

int pageKey = this.Frame.BackStackDepth; 

// Remove page key and higher page keys 

for (int key = pageKey; pages.Remove(key); key++); 

"Create a new page state dictionary and save it 
pageState = new Dietionary<string, object>(); 
pages.Add(pageKey, pageState); 


base.OnNavigatedTo(args); 


然而，静态 pages 字典还必须消除任何等于或卨于 BackStackDepth 键的记录。这些记 
录是由 子未经 GoForward 调用平衡的 GoBack 调用而造成的。如果你明白键不存在时， 
Dictionary 的 Remove 方法会返回 false , 就更容解为什么要移除这些记录的 for 语句： 

for (int key = pageKey; pages.Remove(key); key++); 

在 MainPage 和 Second Page OnNavigatedFrom 搜写要简中得多，只是在现有 pageState 

字典中保存页面 状态： 

项 R: VisitedPageSave I 义件： MainPage.xaml.cs < 片段） 

protected override void OnNavigatedFrom(NavigationEventArgs args) 

( 

pageState.Clear (); 

// Save the page state in the dictionary 

pageState.Add("TextBoxText", txtbox.Text); 

base.OnNavigatedFrom(args); 

也要记住， pageState 字典可以保存吏多项，多到需要重建整个页面状态。 

在连续豇 Iflj t 在 TextBox 中输入丨、2、3等等，也许是检査程序是否正常 I :作的 M 简 
单方法 。按 K Go Forward 和 Go Back 按钮，会肴到恢复的 id 求。 

如果在 Visual Studio 暂停冉继续应用，你会发现一切都会正确恢复。然而，应用暂停 
的时候并+保存任何东西， W 此，如果应用哲停后终止，卜次启动后则会出现新的原始状 
态。你吋能不希 Mil 1 , 现这种情况，但即使出现了，也不难解决。 

12.8 保存和恢复应用状态 

如果应用终 1 卜.后重新沿动，比如 VisitedPageSave , 你吋能想让应用看起来得好像从未 
终 lh 过。你吋能想让之前创建的所有! Ji 面都恢 M 到以前，你还吋能想让应用展示用户上次 
访问的相同页面。 

换句 W •说，小仅需要保存(并恢复)每个页面状态，还需耍保存(并恢 H ) 回退栈状态。如 
果+恢复冋退栈，恢复毎个负面实际1:就没用，因为没有回退栈，就没有必要恢复觅面的 
记录！ 

前血提到过，回退栈完全在 Frame 对象的内部。幸运的是， Frame 提供两个方法来保 
存和恢复回退栈，而+需要知道其内部结构： GetNavigationState 返回一个字符串， Kf 以保 
存到应用设背甩：程序卜'一次运行时，叫以获取字符串并将其作为参数传递给 
SetNavigationState 。 

这个字符串是什么？如果愿意的话，你可以看肴。你会发现该字符串用数字包含在回 
退栈里的贞 ifri 类名称。没有文档说明这些数7-是什么，将来可能也会改变，丙此，真的应 
该是只能用字符串从 GetNavigationState 传递给 SetNavigationState 。 

GetNavigationState 实际上+仅仅只返回对回退栈态进行编码的宁-符串。调用 
GetNavigationState 会导致1前页面获扮 OnNavigatedFrom 调用，间时 NavigationMode ')•) 




Forward 。 这样，当前页面能保存其页面状态，但这也意味着无法在任何想要的时候调用 
GetNavigationState 。 只能在中断应用的时候调用 GetNavigationState 。 可以在 App . xaml.cs 的 
OnSuspending 寧件处理程序里这么做。 

以下是我在 ApplicationStateSave 程序里所做的事情。 

项目 ： ApplicationStateSave | 义件： App.xaml.cs ( 片段 > 

private void OnSuspending(object sender, SuspendingEventArgs e) 

{ 

var deferral = e.SuspendingOperation.GetDeferral(); 

//TODO: Save application state and stop any background activity 

// Code added for ApplicationStateSave project 

ApplicationDataContainer appData = ApplicationData.Current.LocalSettings; 

appData.Values["NavigationState"] = (Window.Current.Content as Frame).GetNavigationState 0; 

// End of code added for ApplicationStateSave project 

deferral.Complete(); 


我保留了 Visual Studio 生成的完整 OnSuspending 版本，只添加了前后有注释的两行代 
码。代码从 Frame 获取 GetNavigationState 字符串，并用 " NavigationState " 的名称将其保 
存到应用设背。 

本书前面的一些程序从 MainPage 保存应用设置。这里为什么不也这么做？回想一下， 
多页面环境的 Page 派生类应该在 OnNavigatedTo 或 Loaded 时附加所需的任何事件处理程 
序，并在 OnNavigatedFrom 或 Unloaded 期间再分离，也就是说，应用中每一个 Page 派生 
类都需要设置 Suspending 处理程序来执行该 工作。 但并不真的是 Page 派生类的工作。这项 
工作涉及保存定义多个页面之间导航关系的导航状态，因此，应该是应用本身的责任。 

这就是 App 类中代码这么写的一个原因。而另一个原因是，恢复导航状态也需要在 
App 类中运行，实际上是在 App 类的特定位 H , 因为在那里可以有效覆写默认逻辑编码。 

为了恢复回退找，可以通过从 GetNavigationState 获得的已保存字符串来调用 
SetNavigationStatec ■而调用 SetNavigationState 会导致导航至之前的当前页。通过设置为 Back 
的 NavigationMode ， 调用该页面的 OnNavigatedTo 方法，页面電新加载自身页面设不 
认为它是新页面。 

至关軍要的是在 App . xaml . cs 里 OnLaunched 方法的特定位 置调用 SetNavigationState 。 
ApplicationStateSave 项目完整保留了 OnLaunched 生成的所有代码和注释，如下所示。 

项目 ： ApplicationStateSave | 文件： App.xaml .cs ( 片 段） 

protected override void OnLaunched(LaunchActivatedEventArgs args) 

i 

Frame rootFrame = Window.C 









alues.ContainsKey("NavigationState")) 

SetNavigationState(appceta.Values 【 **NavigationState "】 as string); 
e added for ApplicationStateSave project 






in the current Window 
ent = rootFrame; 




我又用注释来识别添加到项目的代码。（注意结尾的省略号。下一节会讨论添加到 
App . xaml . cs 里的额外代码。） 

在 OnLaunched 方法的底部，通过 MainPage 类来调用 Navigate 方法。如果正在恢复回 
退状态，你肯定不希望发生 Navigate 调用，因为这会离开之前的当前页，并可能导致回退 
找的一部分在 MainPage 的 OnNavigatedTo 方法中被删除。出于该原因，必须该调用之前恢 
复回退栈，确保 Frame 对象的 Content 属性设置为之前的当前页，并确保跳过到 MainPage 
的导航。 

tl 前为止的所有代码都涉及保存和恢复回退栈。接下来牵涉保存和恢复所有页面状态。 
在之前的项目中，我定义了一个类来维护两个字典，称为 SaveStatePage (—个字典实例字典， 
一个是静态字典 )， 均用丁•保存页面状态。 MainPage 和 SecondPage 均派生丁-该类。 

我为程序保留了上述架构。 MainPage 和 SecondPage 和之前项0的类也相同。但 
SaveStatePage 得到增强，用来在应用本地#储中保存并检索所有页曲的所有设置。 

如果一个特定回退栈引用4个 MainPage 实例和3个 SecondPage 实例，则总共有7个 
键名 “ TextBoxText ” 的设置。7个设置必须有区分。幸运的是，用于存储应用设置的 
ApplicationDataContainer 有“容器”功能，有点类似于文件夹或子0录。该功能似乎适合 
隔离每个页面的设 S 。 容器由名称来识别.我为每个 Page 实例所选的名称都表明实例在回 
退栈中的位置，和转换为字符串的 pages 字典整数键一样。 

以下是增强版 SaveStatePage 的静态构造函数和 Suspending 处理程序。 Suspending 事件 
的处理程序由静态构造函数附加，因此只执行一次保存所有页面设 W , 不用知道设置内容。 

项 H: ApplicationStateSave I 文件： SaveStatePage.cs ( 片段 } 
public class SaveStatePage : Page 
( 

protected Dictionary<string / object> pageState; 






foreach (string key in pages[pageKey].Keys) 

container.Values.Add(key, pages[pageKey][key]); 



静态构造函数结束的时候， pages 字典为回退栈上的每个页面包含一条记录。这些单个 
页凼都不会进行实例化。然而，每个 SaveStatePage 派生类会实例化，在 OnNavigatedTo 蒗 
写时期间获取自己的 pageState 字典，要么从 pages 字典中检索而得，要么创建新的。 


12.9 导航加速器和鼠标按钮 

你用5个按钮(而不是通常3个按钮)的鼠标吗？我不用，不过有人用，而且有些人习 
惯用额外两个按钮在 Internet Explorer 里进行前进和后退导航，其他 internet Explorer 用户 
已经习惯了使用左右箭头键及 Alt 键进行后退和前进导航。一些键盘有特殊按键来执行这 
些操作。 

你吋能想实现同样的快捷键，允许用户在应用页面之间导航。要做到这一点，需要你 







还没有见过的两个事件 ： PointerPressed 和 AcceleratorKeyActivated 。 

AcceleratorKeyActivated 事件在 Page 类 、 Frame 类甚至支掉 Frame 的 Window 类里都 
不可用。但它在 Core Window 中可用， CoreWindow 是支持 Window 输入事件的对象，可从 
当前 Window 对象获得 CoreWindow 对象。 

AcceleratorKey Activated 处理程序获取第一次按键，如果该处理程序把一个特定 键识别 
为命令加速器，则可以在应用里通过把事件参数的 Handled 属性设 S 为 true 来进一步禁止 
该键可见。 

正如第13章所述，鼠标按钮按压、手指或手写笔触摸屏幕时会触发 PointerPressed 鼠 
标事件。该事件由 UlElement 定义，而由 Frame 和 Page 进行继承，但为了获取！ Ji 面导航的 
按钮点击，也可以为该事件给 CoreWindow 定义一个处理程序。 

键盘和鼠标加速器的功能高于页面级别，因此，可以很方便地把它们放入 App 类。 

前面我在 ApplicationStateSave 项目的 App 类里展示过 OnLaunched 方法。该方法结尾 
用省略号表明该方法包含更多代码，如下所示。 

项 H: ApplicationStateSave | 文件： App.xaml.cs ( 片段 > 

protected override void OnLaunched(LaunchActivatedEventArgs args) 



// Code added for ApplicationStateSave project 


Window. Current. CbreWincbw. Dispatcher .AcceleratorKeyActivated — CriAcceleratorKeyActivated; 
Window.Current.CoreWindow.PointerPressed += OnPointerPressed; 

// End of code added for ApplicationStateSave project 


PointerPressed 事件处理程序是两者中较简单的一个，我们先来看看。从事件参数的 
CurrentPoint 属性的 Properties 属性可以得到5个鼠标按钮的状态，把常用于导航的两个额 
外的按钮识别为 XButtonl 和 XB U tton 2。 我们只对这种情况感 兴趣： 不按压所有常规按钮， 
只按压一个额外按钮(也就是说，它们的状态彼此不相等)。 


项 R: ApplicationStateSave | 文件： App.xaml .cs ( 片段） 



PointerPointProperties props = args.CurrentPoint.Properties; 


if (!props.IsLeftButtonPressed && 

'.props.IsMiddleButtonPressed && 

!props.IsRightButtonPressed && 

props.IsXButtonlPressed != props.IsXButton2Pressed) 

if (props.IsXButtonlPressed) 

GoBack(); 



GoBackO 


Handled 




>id GoForwardO 


Current.Content 


J.CanGoForward) 


.GoForward(); 


如果車件导致调用 GoBack 或 GoFonvard 方法，事件处理程序就会把事件参数的 
Handled 属性设賈为 true 。 

对于键盘加速器，車件处理程序可以对左右箭头键使用 VirtualKey , 此项没有表示特 
殊浏览器键的枚举项 。在 Win 32 API 中，特殊浏览器键被识别为 VK _ BROWSER_BACK 
和 VK BROWSER FORWARD . 值分别为 166和 167。 


cceleratorKeyActivated(CoreDispatcher sender, AcceleratorKeyEventArgs args) 


((a rgs.EventType == CoreAcceleratorKeyEveni 
args.EventType == CoreAcceleratorKeyEven 
(args.VirtualKey == VirtualKey.Left I I 
args.VirtualKey m VirtualKey.Right I I 
(int)args.VirtualKey = 166 || 

(int)args.VirtualKey 167)) 


tType. 

itType. 


KeyDown) 


CoreWindow window - Windov 
CoreVirtualKeyStates down 


// Ignore key combinations where Shift or Ctrl is dov 
if ((window.GetKeyState(VirtualKey.Shift) & down)== 
(window.GetKeyState(VirtualKey.Control) & down) 


.Current.CoreWindow; 

* CoreVirtualKeyStates.E 


"Get alt key state 

bool alt = (window.GetKeyState(VirtualKey.Menu) h down) == down; 

//Go back for Alt-Left key or browser left key 
if (args.VirtualKey == VirtualKey.Left && alt |I 
(int)args.VirtualKey 166 && Salt) 



// Go forward for Alt-Right key or browser right key 
if (args.VirtualKey == VirtualKey.Right && alt I I 
(int)args.VirtualKey =* 167 && !alt) 



只有当 Alt 键(也称为“菜单键” ） 也被同时按下(而不是 Shift 或者 Ctrl 键被按下时)， 
左右箭头键才有加速器功能，而且只有在没有按下辅助键的时候，才接受特殊浏览器键。 

GetKeyState 方法用起来有点笨拙，因为 GetKeyState 可以返回 CoreVirtualKeyStates 的 
7个枚 举项： None (等于0>、 Down (等于1)、 Locked (等于2)。在内部，所有键都视为开关, 
枚举项为标识。键弹起时状态为0,按下时状态为3,释放时状态为2。再次按下时状态为 
1. 释放状态时再次回到0。 
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12.10 传递和返回数据 

页面经常需要共享数据，例如，页面共享视图模式就很常见。 App 类是维护 ! SlM 共享 
数据的好地方。往该类添加方法和属性时+要犹像。例如， uJ ■以添加名为 ViewModel 的公 
共属性，该属性有公共 get 访问器和私有 set 访问器，这样可以在 App 构造函数中进行初 
始化。 

另一方 Iffi , 从数据应该只对需要知道的类可见这一哲学而言，+要把所有东西都放进 
App 类。导航是把数据从_个页面传递到另一个页面以及把数据从第：个页面返回到第一 
页面，一种非常结构化的方法。 

DataPassingAndRetuming 项目通过两个简单页面来演这些方法。第 一个页 illi 与通常 
—样称为 MainPage , 而第二个页面称为 DialogPage . 因为其功能很像 -- 个对话框 。 MainPage 
只能导航到 DialogPage , 而 DialogPage 只能返回到 MainPage 。 

两个页面之间的导航受限，因此页面不需要保存页面状态。为了使程序更加简单 ，迮 
暂停期间小保存导航状态或页面状态，也不实现键盘或鼠标快捷方式。尽管非常简单，但 
仍然是以解释茌本的数据传递方法。 

DialogPage 的 XAML 文件有三个 RadioButton 控件，分别是 Red , Green 和 Blue , 还 
有一个标签为 “ Finished ” 的常规 Button 控件。 

项 DataPassingAndRetuming | 文件 ： DialogPage .xaml 《片段 } 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 



<RadioButton.Tag> 


<Color>Red</Color> 
〈 /RadioButton.Tag> 
</RadioButton> 


<RadioButton Content="Green , ' Margin="12"> 
<RadioButton.Tag> 

<Color>Green</Color> 

</RadioButton.Tag> 

</RadioButton> 



<RadioButton.Tag> 


<Color>Blue</Color> 



<Button Content-"Finished" 


HorizontalAlignment*"Center" 








注意，每个 RadioButton 都把其 Tag 属性设置为与该按钮相对应的 Color 值 。 DialogPage 
的代码隐藏文件负责从这些按钮获取选定的 Color 并返回给 MainPage 。 

有趣的是， MainPage . xaml 和 DialogPage . xaml 非常相似，只不过 Grid 有名称，中间的 
RadioButton 为选中 ， Button 的标签为 “Get Color ” 。 

项目 ： DataPassingAndReturning I 文件： MainPage. xaml ( 片段 > 



Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<StackPanel> 



HorizontalAlignment="Center' 

Margin="48"> 


<RadioButton Content="Red" Margin="12"> 
<RadioButton.Tag> 

<Color>Red</Color> 



〈 /RadioButton 〉 



<RadioButton.Tag> 



HorizontalAlignment="Center" 
Margin-"48" 



这里的想 法是， 通过 MainPage 中的 RadioButton 控件，为 DialogPage 中的 RadioButton 
控件选择初始值，也就是说， MainPage 需要传递数据给 DialogPage 。 

MainPage 和 DialogPage 相互之间传递的数据只有 Color 值，但对实际应用而言可以是 
多得多的值。我们通过定义专门在页面之间传递数据的类来反映这种可能性， MainPage 传 
递给 DialogPage 数据的类如下 所示。 


项月 ： DataPassingAndReturning | 文件： PassData.cs 



public Color InitializeColor { set; get;) 


对木例而吉，从 DialogPage 返回到 MainPage 的数据非常相似。 
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项 H: Data Pas singAndRe turning I 文件： ReturnData.es 
using Windows.UI; 



public class ReturnData 


public Color ReturnColor { set; get; } 

} 

) 

我在本例中可以使用相同的类，当然在一般情况下，两项任务可以使用不同 的类。 
小心！为了和逻辑及数据流保持一致，我会在 MainPage 和 DialogPage 代码隐藏文件 
之间反复讨论。 

简单的数据传输是从 MainPage 到 DialogPage 。 点击 MainPage 里的 “Get Color ” 按钮， 
代码隐藏文件就会创建 PassData 类型的对象，然后扫描整个 RadioButton 控件集合，看看 
哪个被选中，是分配给 PassData 的 InitializeColor 属性的 Color 值。 PassData 对象则成为 
Navigate 的第二个参数： 

项目 ： DataPassingAndReturning | 文件： MainPage• xaml.cs ( 片 段） 
void OnGotoButtonClick(object sender, RoutedEventArgs args) 



PassData passData = new PassData0; 

// Set the InitializeColor property from the RadioButton controls 
foreach (UIElement child in radioStack.Children) 
if ((child as RadioButton).IsChecked.Value) 



"Pass that object to Navigate 

this.Frame.Navigate(typeof(DialogPage), passData); 

» 

如果调用 DialogPage 中的 OnNavigatedTo 覆写，事件参数的 Parameter 属性则为传递 
给 Navigate 第二个参数的对象。 DialogPage 通过该属性初始化自己 RadioButton 控件的 
设置: 

项目 ： DataPassingAndReturning I 义件： DialogPage.xaml.es 
protected override void OnNavigatedTo(NavigationEventArgs args) 

// Get the object passed as the second argument to Navigate 
PassData passData = args.Parameter as PassData; 


// Use that to initialize Che RadioButton controls 
foreach (UIElement child in radioStack.Children) 

if ((Color)(child as RadioButton).Tag = passData.InitializeColor) 



现在,可以单击三个 RadioButton 控件来选押 Color 值。如果对选择满意，则按下 Finished 
按钮。处理程序直接调用 GoBack , 并返回 MainPage 。 

项目 ： DataPassingAndReturning I 文件： DialogPage.xaml.cs ( 片段 > 
void OnReturnButtonClick(object sender, RoutedEventArgs args) 


this.Frame.GoBack(); 
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如果 GoBack 有一个可选参数能够被设置为返回目标页面的数据，那就太好了。但事 
实并非如此。没有机制做这件事，必须考虑其他 方法。 

有这样一种可 能性： DialogPage 调用 GoBack , 然后调用 DialogPage 中的 
OnNavigatedFrom 覆写。事件参数的 Content 属性为(将要导航到的) MainPage 的实例。也就 
是说， MainPage 可以定义公用属性和方法来专门从 DialogPage 获取信息，而 DialogPage 
叫以在 OnNavigatedFrom 覆写时设置该属性或者调用该 方法。 

只不过在架构上有点儿粗糙，因为 DialogPage 必须熟悉导航到自身的页面类型。 一般 
情况下，这不是一个好的解决方案。 

DialogPage 有一个更好的解决方案，即通过它需要返回的数据类型来定义 Completed 
事件: 

项目 ： DataPassingAndReturning I 文件： DialogPage.xaml.cs ( 片段 > 
public sealed partial class DialogPage : Page 
{ 

public event EventHandler<ReturnData> Completed; 


MainPage 需要为该事件设置事件处理程序。 MainPage 中只能在 OnNavigatedFrom 方 
法甩设賈，因为事件参数包含 Content 属性，而 Content 属性是将被导航到的 DialogPage 
的 实例： 

项目 ： DataPassingAndReturning I 文件： MainPage.xaml.cs ( 片段） 
protected override void OnNavigatedFrom(NavigationEventArgs args) 

{ 

if (args.SourcePageType.Equals(typeof(DialogPage))) 

(args.Content as DialogPage).Completed += OnDialogPageCompleted; 



MainPage 知道 DialogPage , 因为它要被导航到 DialogPage 。 但 MainPage 也可能导航 
到其他页面，因此要检杳事件参数的 SourcePageType 属性，以确保 MainPage 知道特定 
OnNavigatedFrom 事件所表明的页面。 

有了该结构， DialogPage 就不需要知道 MainPage , 也应该这样。在面向对象的编程环 
境中，事件的主要目的之一就是不让信息提供者知道信息使用者。 

DialogPage 在 Button 的 Click 处理程序中触发 Completed 事件，但我选择在 
OnNavigatedFrom 中实现该逻辑。 

项月 ： DataPassingAndReturning I 文件： DialogPage.xaml.cs ( 片 段） 
protected override void OnNavigatedFrom(NavigationEventArgs args) 

{ 

if (Completed != null) 

{ 

// Create ReturnData object 

ReturnData returnData = new ReturnData(); 

// Set the ReturnColor property from the RadioButton controls 
foreach (UIElement child in radiostack.Children) 



// Fire the Completed event 
Completed(this, returnData); 
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如果确实有 Completed 事件的处理程序， DialogPage 就会实例化 RetumData 对象，然 

后从 RadioButton 控件的集合里设賈 RetumColor 属性。 

在 Completed 处理程序中， MainPage 通过来自 DialogPage 的数据来设靑其 Grid 的 

Background 属性，并选中一个 RadioButton ： 

项目 ： DataPassingAndReturning I 文件： MainPage.xaml.es ( 片段） 
void OnDialogPageCoropleted(object sender, RetumData args) 

{ 

// Set background fran returned color 

contentGrid.Background = new SolidColorBrash(args.ReturnColor); 

// Set RadioButton for returned color 

foreach (UIElement child in radioStack.Children) 

if ((Color)(child as RadioButton).Tag ― args.ReturnColor} 



(sender as DialogPage).Completed -« OnDialogPageCompleted; 

} 

处理程序把自己从发送方分离出去，然后结束。 

但我所给出的代码有一个缺陷，即在默认情况下， MainPage 的实例在 DialogPage 里设 
H Completed 事件的处理程序，但并 +是 DialogPage 返回到的那个 MainPage 的实例！解决 
这个小问题需要把 NavigationCacheMode 设 K 为 Disabled 以外的值。 

项目 ： DataPassingAndReturning I 文件： MainPage.xaml.es ( 片段 > 
public sealed partial class MainPage : Page 


public MainPage() 



在 MainPage 这样做町以保证中.个实例对以应用为架构中心的页面是非常合理的。引发 
DialogPage 的 MainPage 实例和从其获取数据的实例应该是同一个。 


12.11 Visual Studio 标准模板 

我坦白，这几年来我一直在各种 Windows 环境中写页面导航逻辑代码，从来没碰到过 
要实现加速键或鼠标按钮快捷键的情况。之 前肢尔 的代码改写自 Visual Studio 生成的一个 
类，名为 LayoutAwarePage ， 派生自 Page , 它实现了若干有用功能。 

如果调用 Add New Item 对话框并添加一项 Basic Page 而不是 Blank Page , 
LayoutAwarePage 和其他组合类会自动添加到 Visual Studio 项0。这些文件也是 Grid App 
和 Split App 模板的一部分。贞面类通过选择派生自 LayoutAwarePage 的 Basic Page 而+是 
通过 Page 创建。 LayoutAwarePage 定义 SaveState 和 LoadState 虛拟方法，豇面实例能保存 
和加载状态，冉结合另一个生成的 SuspensionManager 类，能完成很多工作。 

如果程序暂停并在重启后$:新加钱其状态，那么 LayoutAwarePage 结合 
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SuspensionManager 还能保存应用状态 ( 包括回退栈)。 

LayoutAwarePage 如此命名，是因为它通过 SizeChanged 方法检查 
ApplicationView.Value 属性，并通过与 ApplicationViewState 枚平项 “FullScreenLandscape ” 、 
“ FullScreenPortrait ” 、 “ Filled ” 和 “ Snapped 相对应的字符串调用 

VisualStateManager.GoToState 。 这些状态允许 XAML 文件通过视觉状态管理器标记来舍看 
自身视图变化。 

是否想使用这些类或实施这些功能 ( 或类似功能 ) ，由你 fcl 己决定。不管是否使用，研 
究这些类并看看能学到什么， + 会有坏处。 

在 Visual Studio 申 . 创建新项目时，我一直都用 Blank App ， 但有两个替代品 Grid App 
和 Split App 。 这些模板利用 LayoutAwarePage 和 SuspensionManager 以及 DataModel 文件 
夹中的示例视图模型。它们演示了在屏幕 1: 布局数据的推荐方法。也许 最軍要 的是 ， Grid 
App 和 Split App 模板演示使用剩下的两个 ItemsControl 派生类基本方法 : GridView 和 
List View 。 

GridView 和 ListView 通过 Selector 和 ListViewBase 派牛•自 ItemsControl。GridView 和 
ListView 都不为自身定义任何公用属性和方法，但从 ListViewBase 共享很多属性和方法。 
如果检杏 generic.xaml ， 你还会发现 GridView 、 ListView、GridViewltem 和 ListView Item 的 
模板其实并不一样。尤其在默认情况下， GridView 使用 WrapGrid 来显 • 项 U ，而 ListView 
则使用 VirtualizingStackPanelo 

GridView 和 ListView 也适合用于分组项 U 。定义条日如何分组以及划分组间隔的头部 
外观 。 Grid App 和 Split App 中有相应的例子。 

Windows 8 身的启动屏錄就是 GridView 或者非常类似 GridView 。 你可能知道 ， wf 
以在启动屏 ® h 点击项 U 来进行选择。这种选择方式巾 ListViewBase 所支持 ( 因此 GridView 
和 ListView 也支持 ) ，但在 Visual Studio 模板甩不可用。 

Windows 8 侣动屏幕允许移动项 U 。 该功能受 ListViewBase 支持 ( 但有趣的是，不支持 
项目分组。 ） Window S 8 启动屏幕 i 持语义 缩放： 如果用手指捏住启动屏幕，屏幕会被折叠 
起来使我们看到更大的分纽，然后选杼所有组。吋以通过 SemanticZoom 类在你自己的应用 
中这样做。 

现在，我们来仔细看一看 Grid App 模板。（可以自学 Split App 。） 该项 y 包含 3 个 
LayoutAwarePage 派生类。 

如卜 ’ 图所示 ， Grid App 通过显示 GroupedltemsPage 来初始化。 
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在实际应用中，这些灰色盒子可能是图片或其他图形。 

页面有一个标题和一个能横向滚动的 Grid View 控件。中 - 个项 〖I rll StandardStyles.xaml 
里名为 “Standard250X250ItemTemplate” 的 DataTemplate 资源定义。头部外观 (“Group Title: 
1 >” 等等)在 GroupedltemsPage.xaml 里通过 Grid View 的 GroupStyle 属性的 HeaderTemplate 
属性定义。 

贸面在 Filled 视图中具有同样外观，但在 Snapped 视图中，则切换为一个垂直滚动的 
List View ， 如 F 图所示。 



ItemTemplate 属性现在为 DataTemplate 资源 “Standard80ItemTemplate ” 。 注意， N jfl 
标题格式也不同。其格式为 “ SnappedPageHeaderTextStyle ” ， 而+是通常的 
“PageHeaderTextStyle ” ，两者都在 StandardStyles.xaml 中定义。 

如果程序处『卜图所示的 Snapped 模式， GridView 和 ListView 之间的切换就发生在 
GroupedltemsPage.xaml 文件中并基于 LayoutAwarePage 里的 VisualStateManager 调用。 
GroupedltemsPage.xaml 文件包含一个视觉状态管理器小节，能响应 Snapped 状态以及 
FullScreenPortrait 状态。 
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以下是 GridView 在更宽的横向视图，但你会注意到两边少了一点边距。像这样在 
XAML 中定义变化，是使用视觉状态管理器来告知 + 同视图的优点之一。 

如果点击其中一个头部标题，会导航到 GmupDetailPage, 见卜图。 



注意， Back 按钮由左上角的一个圆圈箭头来实现。 Button 将其 Style 设置为 
StandardStyles.xaml 里所定义的 BackButtonStyle 资源。这仍然是 GridView, 除了头邰非常 
大并目 . 出现在左边。单个项 H 现在通过 ItemTemplate 来显示，并基丁•在 StandardStyles.xaml 
的 Standard500x 1 30ItemTemplate 资源。 

页曲'再次切换到 Snapped 状态中的 ListView, 见 下图。 



注意， Button 外观也改变了。 StandardStyles.xaml 有 SnappedBackButtonStyle 和 
PortraitBackButtonStyleo 卜图 为降屏视图。 







© Group Title: 2 



无论从 GroupedItemsPage 还是从 Group Detail Page, 都⑴以导航到中个项 0 贝面，见 
5 图。 


© Group Title: 2 



起初看起来是一个条目，然而，水平滚动可以査看同一纽的其他条 0 。奴 id 主体实际 
上一个 FlipView 。 而其中每个条 H 部是 ScrollViewer ， 包含 RichTextBlock 元素 集合。 我会 
在第 16 章进行讨论。在 Grid App 模板中， RichTextBlock 元素由 RichTextColumns 类生成 , 
可以在 Common 文件夹找到 RichTextColumns 类。 













Portrait 视闯也不一样，如下图所示。 


© Group Title: 2 



虽然我会在本书的项 tl 中继续使用 Blank App 和 Blank Page 模板，但要以史易？理解 
的 ( 我希绍 ) 简化方式在更复杂的模板中实现一些功能。 
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12.12 视图模式和集合 

正如第丨丨章所示， Colors 类提供了便捷对象源，用于在 hemsControl 和 ListBox 中显 
示。然而，如果谈到 GridView 和 ListView 控件，则需要找一些更高级、更真实的示例 
数据。 

为此，我的网站 http://www.charlespetzold.com/Students 0 录包含有一个名为 
s tud en ts.x m l 的文件，包含一所高中 69 名学生的信息。目录里还包含这些学生的靓照，取 
自得克萨斯州埃尔帕索 1912 年到 1914 年的高中年鉴。年鉴属于公共领域，由埃尔帕索公 
众图书馆进行数字化，并在 http://www.elpasotexas.gov/library/ourlibraries/main_library/ 
yearbooks/yearbooks.asp 上提供给 公众。 

ElPasoHighSchool 项目是一个库，能访问该 XML 文件并构造视图模型，向应向提供该 
信息。以下 Student 类代表一个 学生。 注意，该类实现 INotifVPropertyChanged 以适合数据 
绑定： 

项 H: ElPasoHighSchool I 文件： Student.cs 

using System.ComponentModel; 

using System.Runtime.CompilerServices; 

namespace ElPasoHighSchool 

( 

public class Student : INotifyPropertyChanged 

string fullName, firstName, middleName, lastName, sex, photoFilename; 
double gradePointAverage; 

public event PropertyChangedEventHandler PropertyChanged; 

public string FullName 

( 

set { SetProperty<string>(ref fullName, value);) 
get { return fullName;) 


public string FirstName 

( 

set { SetProperty<string>(ref firstName, value);) 
get { return firstName; > 


public string MiddleName 

( 

set { SetProperty<string> <ref middleName, value); } 
get { return middleName;) 


public string LastName 
{ 

set { SetProperty<string>(ref lastName, value);) 
get { return lastName; } 


public string Sex 


set { SetProperty<string>(ref sex, value); } 
get { return sex;) 
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SetProperty<string>(ref photoFilename, 
return photoFilename; | 


value); 
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propercyName? 


(PropertyChanged != ni 
PropertyChanged(this, 


以卜 StudentBody 类也实现 1 NotifyPropertyChanged。 该类包含学校名称和 Student 类划 
的 ObservableCoUection， 用 丁存 储所有 Student 对象。 

项 H: ElPasoHighSchool | 义件： StudentBody. cs 
using System.Collections.ObjectModel; 
using System.ComponentMode1; 
using System.Runtime.CompilerServices; 

ElPasoHighSchool 

public class StudentBody : INotifyPropertyChanged 
{ 

string school; 

ObservableCollection<Student> students = new ObservableCollection<StudenC>(); 

public event PropertyChangedEventHandler PropertyChanged; 

public string School 

( 

set ( SetProperty<string>(ref school, value); | 
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storage = value; 

OnPropertyChanged(propertyName); 
return true; 


protected void OnPropertyChanged(string propertyName) 

{ 

if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEvencArgs(propertyName)); 


ObservableCollection 实现 INotifyCollectionChanged 接口，该接 口定义 CollectionChanged 
事件。无论什么时候添加条目到集合、从集合删除条 0 ，或者现有条目重新排序， 
ObservableCollection 都会触发该事件。如果把对象设 S 为条 H 控件的 ItemsSource 属性，控 
件就会检作对象是否实现了 INotifyCollectionChanged 。 如果己实施，则为 CollectionChanged 
啪件附加处理程序，并且如果发生条 H 增加、删除或重新排序，则修改其显示。 

我 M 站上的 student.xml 文件， 如卜 ' 所 /ji 。 


义件： http: // www.charlespetzold. 
<?xml version-•• 1.0 •’ encoding=»"utf-8 
<StudentBody xmlns:xsd="http:// 
xmlns 


ilns:xsd="http://www.w3.org/2001/XMLSchi 
: xsi="http: z7www.w3.org/2001/XMLSchema- 


: udents/students.xml(excerpt) 

?> 

ema" 

-instance" 


<School>El Paso High School</School>-<Students> 

<Student> 

<FullName>Adkins Bowden</Fu1lName> 
<FirstName>Adkins</FirstName> 

<MiddleNanve/> 

<LastName>Bowden</LastName> 

<Sex>Male</Sex> 

<PhotoFilename> 

http://www.charlespetzold.com/Students/AdkinsBowden.png 
</PhotoFilename> 

<Grade PointAverage>2.7l</GradePointAverage> 

</Student> 

<Student> 

<FullName>Alfred Black</FullName> 

<FirstName>Alfred</FirstName> 

<MiddleName/> 

<LastName>Black</LastName> 

<Sex>Male</Sex> 

<PhocoFilename> 

http : //www.charlespetzold.com/Students/A1f redBlack.png 
</PhotoFilename> 

<GradePointAverage>2.87</GradePointAverage> 

</Student> 

<Student> 

<FullName>Alice Bishop</FullName> 

<FirstName>Alice</FirstName> 

<MiddleName/> 

<LastName>Bishop</LastNaine> 

<Sex>Female</Sex> 

<PhotoFilename> 

http://www.charlespetzold.com/Students/AliceBishop.png 

</PhotoFilename> 

<GradePointAverage>3.68</GradePointAverage> 

</Student> 


<Student> 

<FullName>William Sheley Warnock</FullName> 

<FirstName>William</FirstName> 

<MiddleName>Sheley</MiddleName> 
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<Sex>Male</Sex> 

<PhotoFi lenaine> 

http://www.charlespetzold.com/Students/Wi11iamSheleyWa mock. 
</PhotoFilename> 

<GradePointAverage>l.82</GradePointAverage> 

</Student> 


Student 和 StudentBody 元素标签对应于前面的 Student 和 StudentBody 类。 我通过 

XmiSerializer 类使用 .NET 序列化创建 / 该 XML 文件，⑷以用同样方式进行反序列化。这 

是 StudentBodyPresenter 类的 B 的， StudentBodyPresenter 类又实施 \ 

INotifyPropertyChanged . 但只有 •个 StudentBody 类取的 M 性： 

顶 R: E 1 Pa soHighSchoo 1 I 文件： StudentBodyPxresenter.es ( 片段） 
public class StudentBodyPresenter : INoti£yPropertyChanged 
I 

StudentBody StudentBody; 

Random rand = new Random(); 

Window currentWindow = Window.Current; 

public event PropertyChangedEventHandler PropertyChanged; 


public 

{ 


StudentBodyPresenter( 

// Download XML file 
HttpClient httpClient * 

Task<string> task = 

httpClient.GetStringAsync("http://www.charlespetzold.com/ 
tas k.ContinueWith(GetStringCompleted); 


s.xml")； 


void GetStringCompleted(Task<string> task) 
if (task.Exception = null && !task.IsCanceled) 






protected bool SetProperty<T>(ref T storage, T value, 

[Ca11erMemberName] string propertyName = null) 



protected void OnPropertyChanged(string propertyName) 

I 

if (PropertyChanged != null) 

PropertyChanged(this, new FropertyChangedEventArgs(propertyName)); 

> 

这个类带来 f 一些问题。我想从类的构造函数来扁动加载和反序列化 XML 文件，但 
无法将构造函数声明为 async, 因此，我需要一个显式附加处理程序。然而，附加处理程序 
不在用户界面线程运行。这是一个问题，因为这种方法需要设胥 StudentBody 属性.但这 
会导致触发 PropertyChanged 事件，并 "J • 能导致用户界面对象绑定更新。这个类需要在用户 
界血线程通过 CoreDispatcher 设背 StudentBody 属性，但 CoreDispatcher 象从何而来？该 
类无法访问在用户界血线程创建对象，而这些对象通常又是 CoreDispatcher 的来源。 

名运的是， Window 对象有 Dispatcher 属性，很容易通过 Window.Current 静态屈性來 
決取当前窗口。 StudentBodyPresenter 类还设贾了 DispatcherTimer. 用 T' 模拟学牛 .GPA 的 
实时变化，给 PropertyChanged 唞件做做试验。 

我们来创述 - 个新的解决方案和项 U , 名为 DisplayHighSchoolStudents 。把现有 
ElPasoHighSchool 项丨 3 添加到该解决方案。在 DisplayHighSchoolStudents 项 1—1 的 References 
节里，设置对 ElPasoHighSchool 项目的引用，并在 MainPage.xaml 文件里创建新的 XML 
命名空间 前缀： 

xmlns: elpaso= .'using : ElPasoHighSchool" 

然 iiTwI 以在 MainPage.xaml 的 Resources 节实例化 StudentBody Presenter 类： 



</Page.Resources 〉 


现在试试从该视图模式访问条 IJ 。 

例如，以 卜标 记会让 TextBlock 全限定类名 ElPasoHighSchool.StudentBodyPresenter ： 



以卜标记•全限类名 ElPasoHighSchool.StudentBody ： 

<TextBlock Text=*MBinding Source={StaticResource presenter}, 

Path=StudentBody)" 

FontSize="24" /> 

试试吏深入地另一个属性，如下 所示： 


<TextBlock 


'(Binding Source®{StaticResource 
Path=StudentBody.Sch 


现在你会得到一些真实 数据： School 属性值或 “El Paso High School ” 。 

StudentBody 的另一个属性是 Students, 试试如下标记： 

<TextBlock Text="{Binding Source=1StaticResource presenter}, 

Path=StudentBody.Students)" 

FontSize="24" /> 

M 示的文本非常 K: ，是另一个全限定类名 “ System.Collections.ObjectModel. 
ObservableCollection' 1 [ElPasoHighSchool.Student] ”。 

然而，吋以在标记 M 索引 Students 属性： 

<TextBlock Text="{Binding Source={StaticResource presenter}, 

Path=StudentBody.Students[23])" 


结果是另一个个 H 类名 “EiPasoHighSchool.Student” ， 但现在我们吋以看到该类的实际 
属性。 

Student 类的一个属件是 FullName, 试试如 K 代码： 

<TextBlock Text="{Binding Source={StaticResource presenter), 

Path=StudentBody.Students[23 】 .FullName}" 

FontSize= ,, 24 , * /> 

结果是学生姓名： “Elizabeth Barnes ” 。 

试试用 Image 元素替换 TextBlock, 并引用 Student 的 PhotoFilename 属性： 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Image Source="{Binding Source*{StaticResource presenter), 

Path=Student.Body.Students [23] .PhotoFilename)" /> 


</Grid> 

结果如 F 图所示。 


现在我们来试试把 ItemsSource 厲性设 W •为 StudentBody 的 Students 属性， 并用 Grid View 
替换 Image 元桌： 

<Grid Background="IStaticResource ApplicationPageBackgroundThemeBxrush»"> 

<GridView IternsSource="(Binding Source-(StaticResource presenter ), 

Path=StudentBody.Students}" /> 


结果是 M 示 Student 对象，如下图所示。 



尽管 Student 对象只显示为全限定类名，但我们还是吋以发现 GridView 的一些作用。 
如果想滚动，敁小条目会弹回一点，而巨可以选抒中 - 个条 U, 如卜 ' 图 所水。 



把 Binding 的一部分移作 DataContext 属性的 Grid. 如此进行简化 : 


〈Grid Background* 0 " (StaticResource Appl icat ionP. 
DataContext-"(Binding Source*(StaticResc 








































<GridView ItemsSource='MBinding Students) 



Grid 中的任何元素现在都可以通过很简单的绑定来访问 StudentBody 类的属性 。 Grid 
中的 TextBlock 会引用 School 属性。 

现在需要为 Student 条日把 DataTemplate 添加到 Grid View ： 



Style="{StaticResource PageHeaderTextStyle}" /> 



<GridView.ItemTemplate> 

<DataTemplate> 

〈Border BorderBrush=" {StaticPesource Appl icationForegroundThemeBrush}" 



<Grid.ColumnDefinitions> 

<ColumnDefinition Width:"80" /> 
<ColumnDefinition Width="200" /> 



VerticalAlignment="Center" 



</GridView> 

</Grid> 


效果如 K 图所示，当然是横屏滚动。 





ListViewBase 会对点击条 I I 进行区分，就好像是一个按钮，并 R 选抒一个条 II 。大部 
分选中支持都继承自 Selector . 并且类似 p ListBox 。 默认情况下，如果轻击一个条0，则 
选中该条 II 。用彩色背景和钩号来显水该条 II ,控件冋时触发 SelectionChanged 事件。 
默认情况下，禁用条 Id 点击，但是吋以通过设 W 属性和事件处现程序来启 用： 

<GridView ItemsSource="(Binding Students)" 

Grid.Row*"1" 

I s I temC 1 ic JcEnabled: •• True" 

ItemClick="OnGridViewItemClick"> 

现在如果轻击一个条 H , 则+会选中条口，而是触发 ItemClick 事件。 ItemClick 处理程序 
的事件参数包括条目，在木例中为 Student 类型的对象。 

然而，用户仍然 " J ■以通过轻扫或心击条目来进行选杼和取消选抒。把 SelectionMode 
设置为 None , •以完全关闭选择 功能： 

<GridView ItemsSource="{Binding Students)" 

Grid.Row="l" 

SelectionMode= M None" 

IsItemClickEnabled="True" 

IteraClick="OnGridViewItemClick"> 

也 iiJ ■以把 SelectionMode 设胃为 Multiple , 但很 W 然，如果程序不能对选中条 | J 进行任 
何操作，则完全不需要实施选中功能。 

即使把 SelectionMode 设置为 None , 仍然可以轻扫条13,使其吋以移动但+会选中任 
何东 两。 如果耍用 AllowDrop fll CanRecorderltems 1/4性实现拖动和屯:新排序功能，你 uf 能 
要保持轻扫操作 可用： 

<GridView ItemsSource="(Binding Students}" 



A1lowDrop*"True" 

CanReorderItems=”True" 

I s 11 emClic kEnabled: "True •• 

I temCl ick-"OnGr idViewI temCl ick"> 

然 ifil , 如果小想允许选中或 ®: 新排序 ， M 好完全馈用 轻扫: 
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<GridView ItemsSource="[Binding Students}" 

Grid.Row="l" 

SelectionMode="None" 

IsSwipeEnabled="False" 

IsItemClickEnabled="True" 

ItemClick="OnGridViewItemClicJc" /> 

在完整的 DisplayHighSchoolStudents 项目中，我使用的仍然是 Blank App ， 同时试图模 
仿 Visual Studio 标准 Grid App 的一般布局。 MainPage 的代码隐藏文件使用 SizeChanged 处 
理程序，基于当前视图来设置可视状态。 

项 DisplayHighSchoolStudents | 文件： MainPage.xand.es ( 片段 > 
public sealed partial class MainPage : Page 
l 

public MainPage() 

( 

this.InitializeComponentO; 

SizeChanged += On PageSizeChanged; 


void OnPageSizeChanged(object sender, SizeChangedEventArgs args) 

{ 

VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), true); 



XAML 文件有 Grid View 显示除 Snapped 之外的所有视图状态，还有 ListView 用于 
Snappedo 两个控件共享 DataTemplate 来 M 示条 tJ 。视图模型以及 XAML 文件的 Resources 
节对此进行定义。 

项目 ： DisplayHighSchoolStudents I 义件： MainPage.xaml ( 片段） 

<Page ... > 

<Page.Resources 〉 

<elpaso : StudentBodyPresenter x : Key="presenter" /> 


<DataTemplate x:Key="studentTemplate"> 
〈Border Height="120" 



<Grid> 

<Grid. RowEJef initions> 

<RowDefinition Height="*" /> 
<RowDefinition Height- … /> 
</Grid.RowDefinitions> 


<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Au 
<ColumnDefinition Width*"*" 
〈 /Grid.ColumnDefinitions 〉 


/> 


/> 


<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan-"2" 
Source®"{Binding PhotoFilename}" 



<TextBlock Text= M {Binding FullName)" 

Grid.Row=» w 0 H Grid.Column="l M 
VerticalAlignment-"Center" 
Margin="5 0" /> 

<StackPanel Grid.Row="l" Grid.Column®"1" 
Orientation="Horizontal" 
VerticalAlignment="Center" 
Margin= M 5 0"> 
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<TextBlock Text="GPA =&*xOOAO; M /> 

〈TextBlock Text-"{Binding GradePointAverage}" /> 



</Grid> 

〈 /Border 〉 

</DataTemplate> 

</Page.Resources 〉 

</Page> 

DataTemplate 在 Grid View fll List View 之间共享 ， List View 用于 Snapped 模式，而且 
Snapped 模式总是意味着 320 单位宽度，因此，为 Snapped 所定义的模板需要小于 320 中 - 位。 
当然，总是吋以给两个控件使用不同的条 H 模板，就像 GridApp— 样。 

页面分为两行，上面一行专门用于一个不可见的 Back 按钮和页面标题。 


项 DisplayHighSchoolStudents | 文件： MainPage.xaml ( 片段) 
<Page ... > 


<Grid Background-"{StaticResource App1icationPageBackgroundThe 
DataContext="(Binding Source={StaticResource presenter}. 


<Grid.F 


<RowDefinition Height="140" /> 
<RowDefinition Heights"*" /> 
</Grid.RowDefinitions> 


〈Grid Grid.Row="0"> 

〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width-"*" /> 
</Grid.ColumnDefinitions 〉 


<Button Name="backButton" 

Gr id • Col umn=’• 0 " 

Style="{StaticResource BackButtonStyle} 
IsEnabled="False" /> 


<TextBlock Name="pageTitle" 

Text='M Binding School)" 

Grid.Column="1" 

Style="(StaticResource PageHeaderTextStyle}" /> 

</Grid> 

</Grid> 

</Page> 

注意，是主页，因此 Button 被禁用。如果按钮禁用，其标准样式就会完全隐藏该按钮。 
TextBlock 也基于标准样式，并绑定到 School 属性。 

Grid 的第二行包含 GridView 和 ListView , 但 ListView 把 Visibility 属性 设置为 Collapsed 。 

项 H: DisplayHighSchoolStudents I 文件： MainPage.xaml ■(片段） 

<Page ... > 




Padding= M 116 0 40 46" 

SelectionMode="None" 

IsSwipeEnabled="False" 

IsItemClickEnabled= M True" 

ItemClick="OnGridViewItemClick" 

ItemTemplate= M 1StaticResource studentTemplate)" /> 


<ListView Name="listView" 

Grid.Row="l" 

ItemsSource-"(Binding Students)" 
Visibility="Collapsed" 

SelectionMode-"None" 

IsSwipeEnabled="False" 

IsXtemClickEnabled= H True" 

ItemClick="OnGridViewItemClick" 

ItemTemplate="{StaticResource studentTemplate} H /> 


</Grid> 

</Page> 


很明显 ， Grid View 和 ListView 共享很多厲性。可以用 ListViewBase 的 TargetType 在 
Style ® 对此进行定义。已经禁用选中，但两个控件都把 ItemClick 事件设置为代码隐藏文 
件中的一个处理程序。 

最后， MainPage 有一部分用于 Visual State Manager 标记，主要 H 的是如果应用处丁 • 
Snapped 状态，则隐藏 Grid View ， 并显示 ListView 。 


项 H: DisplayHighSchoolStudents 
<Page ... > 


nl ( 片段〉 


<Grid Background-"(StaticResource ApplicationPageBackgroundThemeBrush}" 
DataContext-"(Binding Source={StaticResource presenter), 
Path=StudentBody)"> 


<VisualStateManager.VisualStateGroups> 

<VisualStateGroup x:Name="ApplicationViewStates” 




<Storyboard> 


.ionUsingKeyFrames Storyboard.TargetName=" 
Storyboard.TargetProperty= M Style M > 
teObjectKeyFrame KeyTime«"0 
Value="{StaticResource Port 


</ObjectAnimationUsingKeyFrames> 


<ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridView" 
Storyboard.TargetProperty="Padding"> 
<DiscreteCbjectKeyFrame KeyTime="0" Value="96 0 10 56" /> 

</Obj ectAnimationUsingKeyFrames> 

</Storyboard> 

</VisualState> 


<Storyboard> 

<0bjectAn 


<ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridV 
Storyboard.TargetProperty="Visibility"> 
<DiscreteCb j ectKey Frame KeyTime="0" Value="Collapsed" /> 
</0bjectAnimationUsingKeyFrames> 





.TargetName="pageTitle" 
Style "〉 

Value="{StaticBesairce SnapFedPageHoaderTextStyle}" /> 
</ObjectAnimationUsingKeyFrames> 

</Storyboard> 



</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 



</Page> 

除了交换 GridView 和 ListViews 足否 ufW •外，视觉状态管理器节部分还改变按钮和标 
题拃式以及 GridView 填补。 

程序常运行的效果，如 卜图 所尔。 


<DiscreteObjectKeyFrame 

Value 3 "{StaticResource 



HEHQ 


HHaQ 
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很快就会看出 GPA 变化。 

如 F 图所示，在 Snapped 模式卜，程序切换到 ListView , 并有一个较小标题。 







如下图所氺，在竖屏模 A 卜，两边的额外空间会稍微缩小一点。 


无论仟何时候菜•条 II ， GridView 或 ListView 会触发 ItemClick If 件。而这会肩 
动到 StudentPage 类喂的 Page 派屮类的导航，并把忠件参数的 Clickedltem M 性传递给 Page 
派牛.类，事件参数为 Student 类喂的对象。 

项 H: DisplayHighSchoolStudents | 义件 ： Ma inPage • xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 
{ 

void OnGridViewItemClick(object sender, ItemClickEventArgs args) 

( 

this.Frame.Navigate(typeof(StudentPage ), args.Clickedltem ); 
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在 StudentPage 的 OnNavigatedTo • 中，该 Student 对象设背力奴血的 DataContexto 



VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), true); 


protected override void OnNavigatedTo(NavigationEventArgs args) 

I 

this.DataContext - args.Parameter; 
base.OnNavigatedTo(args); 


void OnBackButtonClick(object sender, RoutedEventArgs args) 

{ 

this.Frame.GoBack(); 


还要注总对 VisualStateManager.GoToState 的调用以及返回 MainPage 的 Click 处理 

程序。 

StudentPage.xaml 文件 显示了 Student 类的一些属性。 

项 DisplayHighSchoolStudents | 文件： StudentPage.xaml ( 片段） 

<Page ... 

Name=**page" 

FontSize="24"> 

<Grid 

<RowDefinition Height="140" /> 

<RowDefinition Height:"*" /> 

</Grid.RowDefinitions> 



〈Grid Grid.Row="0"> 

<Grid.ColumnDefinitions> 



</Grid.ColumnDefinitions> 


/> 


<Button Name="backButton" 

Grid.Column="0" 

Style*"{StaticResource BackButtonStyle)" 

IsEnabled="{Binding ElementName=page, Path*Frame.CanGoBack} 
Click="OnBackButtonClick" /> 


<TextBlock Name="pageTitle" 

Text="{Binding FullName)" 

Grid.Column="1" 

Style="(StaticResource PageHeaderTextStyle}" /> 

</Grid> 


〈StackPanel Grid.Row="l» 

HorizontalAlignment= M Center"> 

<Image Source="{Binding PhotoFilename} 
Width="240" /> 


<TextBlock Text="{Binding Sex}" 

HorizontalAlignment="Center" 
Margin=" 10 " /> 


<StackPanel Orientation="Horizontal" 



Margin=" 10 M > 

<TextBlock Text="GPA =&#x00A0;" /> 

<TextBlock Text*"{Binding GradePointAverage)" /> 
</StackPanel> 

</StackPanel> 
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<VisualStateManager.VisualStateGroups> 


<VisualStateGroup x 
〈VisualState x 
<VisualState x 
<VisualState x 


: Name="ApplicationViewStates , * 


"FullScreenPortrait ,, > 



ilmationUsingKeyFrames 

Storyboard.TargetProperty="Style"> 
<DiscreteObjectKeyFrame KeyTime-"0" 

Value="{StaticResource PortraitBackButtonStyle)" /> 
(CtAnimationUsingKeyFrames> 


d.TargetName^-backButton" 


</VisualState> 



<Storyboard> 


<CbjectAnimationUsingKeyFrames Storyboard. TargetName="backButton" 
Storyboard.TargetProperty="Style"> 

<DisereteObjectKeyFrame KeyTime="0" 

Value® 1 " {StaticResource SnappedBackButtonStyle)" /> 
</ObjectAnimationUsingKeyFrames> 


<Cbj ectAnimationUsingKeyFrcimes Storyboard. TargetNane="pageTitie" 
Storyboard.TargetProperty="Style"> 

<DisereteObj ectKeyFrame KeyTime="0" 

Value«" {StaticResource SnappedPageHeaderTextStyle}" /> 
</ObjectAnimationUsingKeyFrames> 

</Storyboard> 

</VisualState> 

</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 

</Grid> 

</Page> 

视觉状态管理器并不像以前那么复杂，因为不再需要切换 GridView 和 ListVievv 。 而唯 
一的真正问题涉及到样式。如下图所示的竖屏模式。 
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12.13 分组条目 

要对 GridView 和 ListView 中的条目进行分组，视图模型需要与绀别对应的 
ObservableCollection 类型的属性。集合中的条日为类实例，类包括用于识别组的标题以及 
用丁 - 条 Q 自身的 ObservableCollection 。 结合代理集合类 CollectionViewSource 来使用此视图 
模型。 

StudentBodyPresenter 视图模型无此属性，但是很容易创建一个新类达到此 H 的。 
GroupBySex 项目演示了如何通过男性和女性对学生进行分组。该项 0 利用几个额外属 
性对在 ElPasoHighSchool 项目中实施的视图模型进行补充。第一个属性称为 StudentGroup, 
有两个属性。 Title 属性作为组标题，而 Students 属性是 Student 对象的集合。 

项目 ： GroupBySex 丨文件： StudentGroup.cs 
public class StudentGroup : INotifyPropertyChanged 
( 

string title; 

ObservableCollection<Student> students = new ObservableCollection<Student>(); 
public event PropertyChangedEventHandler PropertyChanged; 
public StudentGroup() 



public string Title 
{ 

set { SetProperty<string>(ref title, value); J 
get { return title; } 


public ObservableCollectior»<Student> Students 

{ 

set { SetProperty<ObservableCollection<Student»(ref students, value);) 
get { return students; J 


protected bool SetProperty<T>(ref T storage, T value, 

[Ca11erMemberNcuneJ string propertyName = null) 


if (object.Equals(storage, value)) 



protected void OnPropertyChanged(string propertyName) 

( 

if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 


StudentGroups 类 ( 注意为 复数 ) 只有一个可获得的属性称为 Groups ， 为 StudentGroup 对 
象的集合。 StudentGroups 类还有一个仅设 S 的 StudentBodyPresenter 类型的 Source 属性， 
Source 属性构造 StudentGroups 和 StudentGroup 类。我把 Source 作为属性，以便可以在 X A M L 
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进行设置。 

项目 ： GroupBySex I 文件： StudentGroups.cs ( 片 段） 
public class StudentGroups : INotifyPropertyChanged 

i 

StudentBodyPresenter presenter; 

CtoservableCol lection<StudentGroup> groups = new ObservableCollection<StudentGroup> 0 ; 

public event PropertyChangedEventHandler PropertyChanged; 
public StudentBodyPresenter Source 
( 

set 



presenter.PropertyChanged += OnHighSchoolPropertyChanged; 



如果把 Source 属性设 B 为 StudentBodyPresenter 的实例， set 访 N 器则对 PropertyChanged 
事件附加处理程序，并等待 StudentBody 属性设置可用。此时， set 访问器会创建两个 
StudentGroup 类的实例，并用男性和女性学生进行填充。 

为了淸楚说明问题， MainPage.xaml 文件我几乎只保留了最基本的必需功能，它只有一 
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个 GridView ， 而且不会对+同视图改变布局。 DataTemplate 几乎没有任何格式化旁白用 T 
显氺每个条 H ， 我在代码中未包含该模板，因为和前的程序相冋。 

Resources W 包禽有助于 GridView 使用集合的三个类。 StudentBodyPresenter 类是第一 
个，和前面的项目一样。接下来， StudentGroups 实例化，其 Source 属性 设賈为 
StudentBodyPresenter 实例。最后， CollectionViewSource (代理集合)将其 Source 属性绑定到 
StudentGroups 的 Groups 属性 。 StudentGroups 对象为 StudentGroup 对象的集合， 
CollectionViewSource 需要知道来源代表组集合，同时还需要 StudentGroups 类的/萬性， 
StudentGroups 类包含实际条0，在本例中为 Students 。 

项目 ： GroupBySex I 文件： MainPage.xaml ( 片段） 

<Page ... > 

<Page•Resources 〉 

<elpaso:StudentBodyPresenter x : Key= "presenter'* /> 


<local : StudentGroups x:Key="studentGroups" 



Path=Groups) 


IsSourceGrouped="True" 

IternsPath="Students" /> 

<DataTemplate x:Key="studentTemplate"> 

</DataTemplate> 

</Page.Resources 〉 


<Grid Background* 2 "{StaticResource ApplicationPageBackgroundThemeBrush}"> 




<GroupStyle.Panel> 

<ItemsPanelTemplate> 

<VariableSizedWrapGrid Orientation="Vertical" 


</GroupStyle> 

</GridView.GroupSty 

</GridView> 

</Grid> 

</Page> 


GridView 的 ItemsSource 受限于该 CollectionViewSource ， 但一钱其他属性也在此进行 







设贸： 头部的两个面板及 DataTemplate。W 个血板中的第•个(即_设肾为 ItemsPanel 诚性的 
WrapGrid) 和 GridView 的默认模板一样，这样就+志要标记了。然而，标记有助〗•明确品 
示此处的两类血板.一个用于组.而另一个 WT •毎个绀 f. 的条 U。 

滚动后的结果如卜阁所示.这样吋以苻到 M/Tilfil 的男孩和烺前面的女孩。 


M 然我-直在 XAML 文件屮实例化视 m 模式，似在 般情况下你 MJ ■能 ffi 在多个奴血之 
间分享视阁模式。最好在 App 类中实例化视阁投式，吋以将其作为公共诚性供应川的风:余 
部分使用。 
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第 II 部分 

Windows 8 新特性 


► 第13章触控 
► 第14章位图 
► 第15章原生 
► 第16章富文本 
► 第17章共享和打印 
► 第18章传感器与 GPS 
► 第19章手写笔 





第 13 章触 控 

把触屏、鼠标和手写笔输入三者整合起来，这充分体现了 Windows Runtime 的前瞻 
性。不再需要为现有的鼠标应用添加触屏支持，也不需要为触屏应用添加支持鼠标。从 M 
初开始，程序员就可以通过相互转换方式来处理所有这些形式的 输入。 按照 Windows 
Runtime 编程接口，如果不需要区分实际输入设备，我会使用“指针” 一词来指包括触屏、 
鼠标和手写笔(也称触控笔)在内的所有输入设备。 

处理指针输入的最佳方式是通过现有 Windows Runtime 控件。正如你 所看到 的，标准 
控件(比如 Button、Slider、ScrollViewer 和 Thumb 等} 都会响应指针输入并为应用提供较高 
级 输入。 

然而，在某些情况下，程序员需要获取实际指针输入，为此， UlElement 定义了三组不 
同的 事件： 

• 以 Pointer 开头的8个低级事件 

• 以 Manipulation 开头的5个高级^^件 

• Tapped, RightTapped, DoubleTapped 和 Holding 事件 

Control 类通过虚拟保护方法来补充这些事件，这些虚拟保护方法都以 On 开头，幻 ifri 
跟着事件名称。 

为接受指针输入， FrameworkElement 派生类必须把 isHitTestVisible 属件设为 true. 
把 Visibility 厲性设置为 Visible。Control 派生类必须把 IsEnabled 属性设 H 为 true。 该元蒺 
必须在屏幕上用某种图形来表示； Panel 派生类吋以有 Transparent 背景，似+是 null 背既。 

所有这些事件都勾事件发生时手指、鼠标或手写笔背后的元素有关。唯一例外的是指 
针被元素“获取”的时候，本章稍后会进行讨论。 

如果需要追踪单个手指，则需要使用 Pointer 事件。每个丰件都有一个 1D 数字，该编 
号是触碰屏幕的手指或手写笔的唯一标识，也吋以是鼠标或手写笔。本章将演示如何在手 
工画图程序和钢琴键盘程序(可惜无声音)中使用 Pointer 货件。这两个程序显然都需要处理 
来自多个手指的同时输入。 

从某种总义上说，你只需要 Pointer 堺件。例如，如果想实现用户用两个手指来放大/ 
缩小照片的功能，则•以跟踪两个手指的 Pointer 事件，并测域两者间距。而 Manipulation 
事件已经提供了这类计算。 Manipulation IT 件将多个手指幣合成单一行为，因此非常适合移 
动、拉伸、缩小和旋转可视对象。 

对有些应用而言，你可能会疑惑到底是用 Pointer 还是用 Manipulation 办件^也许应该 
首选 Manipulation 事件。特别是如果你以为“我希 M 用户不要用第二个手指，因为我必须 
忽略”，肯定就想用 Manipulation ’Jt 件。如果用户典的用了两个或史多手指而其实一个手 
指就足够时，多个手指的使用效果会被平均。 

然而， Manipulation 事件存在内在延迟。触碰屏嵇时手指需要先动一动，才能确定手指 
滑动是否冇助丁•操作。如果手指只是敲击或按住屏幕不动，就不会触发 Manipulation 事件。 
有时，这种延迟会促使你用 Pointer 事件来代替 Manipulation 事件。本章所提到的 XYSlider 
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自定义控件就是一个好例子。本章中的控件版木是用 Manipulation 事件来写的，因为控件 
不知道该如何处理多个手指。但延迟时间是一个明敁的问题，因此，第14章中，我还用 
Pointer 事件写了另一个版本。 

CoreWindow 对象在窗口级牛.成 Pointer 事件，可以自己通过 GestureRecognizer 来获取 
Manipulation 事件， 但本章会忽略这些控件的使用，而是坚持使用由 UlElement 定义的事件 
以及由 Control 定义的虚拟方法。我不讨论硬件输入设备的有关信息，这些信息可从 
Windows . Devices.Input 命名空间的类中获得。 

针对涉及选择、擦除和存储笔划以及手写识别，手写笔输入有一些特殊的考虑。这些 
内容将在第19章中进行介绍。微软 Surface 平板电脑不支持手写笔输入。 

13.1 Pointer 路线图 

在8大 Pointer 事件中，其中5个很常见。如果用手指触碰一个己激活的可视的 
UIEIement 派生类、移动，提起，则按以下顺序生成这5个 Pointer 事件： 

• PointerEntered 

• PointerPressed 

• PointerMoved (—般会多次出现） 

• PointerReleased 

• PointerExited 

只有当手指触碰屏幕时或刚刚被移开时， Pointer 事件才会产生。并没有所谓的“悬停” 
触碰。 

鼠标则有一些不同。即使没有按鼠标按钮，鼠标也会生成 PointerMoved 事件。假设把 
鼠标指针移向一个特定元素，按下按钮，移动鼠标，再松幵按钮，然后移动鼠标离幵该元 
素。该元素将生成以下一系列 事件： 

• PointerEntered 

• PointerMoved (多个） 

• PointerPressed 

• PointerMoved (多个） 

• PointerReleased 

• PointerMoved (多个） 

• PointerExited 

如果用户按卜并释放不同鼠标按钮，也可以生成多个 PointerPressed 和 PointerReleased 
事件。 

我们试试手写笔。在笔触碰到屏輅之前，元素已经会响应手写笔，因此，首先看到 
PointerMoved 事件，然后看到 PointerEntered 事件。当笔触碰屏幕时，会产生 PointerPressed 
事件。移动笔，再拿起来。 PointerReleased 辦件之后，该元素会继续触发 PointerMoved 事 
件，当笔移动远离屏幕时，通过 PointerExited 无素达到极点。和鼠标触发的亊件序列相同。 

如果用户旋转鼠标滚轮，则生成下列 事件： 

• PointerWheelChanged 
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剩下两个事件较为 罕见： 

• PointerCaptureLost 

• PointerCanceled 

木章后面的章节会讨论捕获，那时 PointerCaptureLost 事件更電要。 

我还未见过 PointerCanceled 事件，即使在我从 电脑上 拔下鼠标的时候也没见过，但$ 
事件的存在 H 的就是报告这类错误。 

所有这钱$件都伴随着 PointerRoutedEventArgs 实例，由 Windows . Ul . Xaml.Input 命名 
空间进行定义。（注 意： Windows . ULCore 命名空间中还有 PointerEventArgs 类，但用于 
处理窗口级的指针输入)。正像该类的名称所示，这些 Pointer 事件都是顺着可视树的路由 
事件。 

PointerRoutedEventArgs 定义路 fh 事件的两个共同属性： 

• OriginalSource 表明引发嚷件的素。 

• Handled 可以停止可视树中的•路由事件。 

通过 PointerRoutedEventArgs 对 象吋以 获得大量其他信息。以下说明仅涵盖重点。该类 
还定义如 F 成员： 

• Pointer 类型的 Pointer 属性 

• KeyModifiers 属性，表示 Shift 键 、 Control 键 、 Menu 键(或 Alt 键) 和 Windows 键 
的状态 

• GetCurrentPoint 方法，返回 PointerPoint 对象 

注意： El 前我们处理的是 Pointer 类(在 Windows . UI . Xaml . lnput 命名空间中进行定义) 
以及 PointerPoint 类(在 Windows . UI.Input 中进行定义)。 

该 Pointer 类有4个属性： 

• Pointerld 属性，识别鼠标，手指或手写笔的无符号整数 

• PointerDeviceType , 枚举值，为 Touch、Mouse 或 Pen 

• IsInRange ， 布尔值，表示设备是否在屏幕范围内 

• IsInContact , 布尔值，表示手指或手写笔是否触碰屏幕，或鼠标按钮是否按下 
Pointedd 属性非常重要。 nJ * 以用该属性来跟踪各个手指的运动。处理 Pointer 事件的程 

序几乎可以定义一个字典，而 Pointerld 属性在该字典中作为关键字出现。 

PointerRoutedEventArgs 的 GetCurrentPoint 方法听起来好像该方法返回指针的当前位賈 
坐标，而 a 的确也就是这样，除此之外，该方法还提供了更多东西。得到特定元素的位貿 
吏方便，因此 ， GetCurrentPoint Hi * 以接受了 UIElement 类取的参数。该方法返回的 PointerPoint 
对象从 Pointer ( PointerId 和 IslnContact 属性)复制--些信息，并提供一些其他信息： 

• Point 类型的 Position , 事件发生时指针的( X , Y ) 坐标 

• ulong 类型的 Timestamp 

• Pointer 类型的 PointProperties (在 Windows . UI.Input 中进行定义） 

Position 属性总是与传递给 GetCurrentPoint 方法的元素的左上角相关。 
PointerRoutedEventArgs 还定义了一个名为 GetlntermediatePoints 的方法，该方法类似 

T* GetCurrentPoint , 只不过返回的是 PointerPoint 对象集合。很多时候，这种集合只有一项 
(和从 GetCurrentPoint 返回一样返回 PointerPoint 组成)，但对于 PointerMovedevent . 返回的 


会不止一项，特别是事件处理程序不是很快的时候。我特别注意到一点，在微软 Surface 
平板电脑上， GetlntermediatePoints 会返回多个 PointerPoint 对象。 

PointerPointProperties 类定义了 22个属性，主要提供事件相关的详细信息，包括按了 
鼠标哪个按钮、是否按下笔杆、笔如何倾斜、手指与屏幕的接触矩形(如果有)、手指或手 
写笔对屏格的压力(如果有)以及 MouseWheelDelta 等等。 

可以根据需要取舍这些 信息。 当然，其中一些信息并不适用于每个设备，因此会有默 
认值。 

13.2 初试手绘 

可以用手指在屏幕绘图上的程序，也许就是典型的多点触屏应用。可以编写这类程序， 
只处理三个 Pointer 事件，并检査两个来 ❹事件 参数的属性，但恐怕结果会留有缺陷，无法 
补偿其简洁性。 

FingerPaintl 的 MainPage . xaml 文件只为标准 Grid 提供命名。 

项 FingerPaintl | 文件： MainPage.xaml 《片段） 



<Grid Name*"contentGrid M 

Background="{StaticResource ApplicationPageBackgroundThemeBrush)" /> 

</Page> 

该代码隐藏文件做的第一件事情是用 uint 类型的关键字定义 Dictionary 。 前面提到过. 
几乎每个处理 Pointer 事件的程序都有这种 Dictionary 。 Dictionary 的存储项类型依赖于应用， 
有时应用会专门为此定义类或结构。在简中.的手绘应用中，每个手指触碰屏幕都将绘制一 
条独特 Polyline ， 使 Dictionary 卩了以存储 Polyline 实例。 

项 FingerPaintl | 文件： MainPage.xaral.cs ( 片段） 
public sealed partial class MainPage : Page 
( 

Dietionary<uint # Polyline> pointerDictionary = new Dictionary<uint, Polyline>(); 
Random rand » new Random(); 
byte[] rgb » new byte[3]; 

public MainPage() 



protected override void OnPointerPressed(PointerRoutedEventArgs args) 

i 

// Get information from event arguments 
uint id * args.Pointer.PointerId; 

Point point ■ args.GetCurrentPoint(this).Position; 

// Create random color 
rand.NextBytes(rgb); 

Color color = Color.FromArgb(255, rgb[0J, rgb11], rgb[2]); 

// Create Polyline 
Polyline polyline = new Polyline 
( 

Stroke = new SolidColorBrush(color), 



polyline.Points.Add(point); 



第 13 章触控 


493 


// Add to Grid 

contentGrid.Children.Add(polyline); 

// Add to dictionary 
pointerDictionary.Add(id, polyline); 
base.OnPointerPressed(args); 


protected override void OnPointerMoved(PointerRoutedEventArgs args) 
( 

// Get information from event arguments 
uint id * args.Pointer.Pointerld; 

Point point = args.GetCurrentPoint(this).Position; 

// If ID is in dictionary, add the point to the Polyline 
if (pointerDictionary.ContainsKey(id)) 

pointerDictionary[id].Points.Add(point); 



protected override void OnPointerReleased(PointerRoutedEventArgs args) 


// Get information from event arguments 
uint id = args.Pointer.PointerId; 



在 OnPointerPressed 覆写中，该程序创建一个 Polyline , 并赋 f 其随机颜色。第一点就 
是指针的位置。该 Polyline 添加到 Grid 和 Dictionary 。 

调用后续 OnPointerMoved , Pointerld 属性会识别手指，因此，可以通过字典访问与手 
指相关联的特定 Polyline . 同时新的 Point 值也会添加到该 Polyline 。由丁和 Grid 中的 Polyline 
是相同实例，因此在手指移动时，屏幕上的对象会随之变长。 

OnPointerReleased 处理程序只移除字典中的条同时完成该特定 Polyline 。 

如果运行该程序，第一件車当然就是整只手扫过屏幕，就像在上纽约州创造手指湖 
(Finger Lakes ) 的冰川一样(见 f 图)。 
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每个手指通过连接点绘出各自的折线，采用单一系列的特定颜色，你会发现，用鼠标 
和手写笔也可以画。 

我之前提到该段代码有缺陷。 OnPointerMoved 和 OnPointerReleased 覆盖要仔细检杳特 
定 ID 是否作为关键字存在于字典中，然后再用其访问字典。这对鼠标和手写笔的处理非常 
tft 要，因为这些设备会在 OnPointerPressed 之前产生 PointerMoved 事件。 

但试试这样做。如下图所示把程序放入快照模式，用手指画一条线，这条线会超出页 
面，再回到页囬。 



看一看图中页面左侧竖直向 F 的直线^手指重新进入页面时就画出了这条线，这说明 
手停留在页面之外时程序没有获得 PointerMoved 事件。 用鼠标看看。效果一样。 

现在试试这 样做： 用手指画一条线，从页面内一直延伸到页面外，然后抬起手指。现 
在，用手指在页面内再画一次。这样做应该可以。 

接 F 来用鼠标试试。在 FingerPaintl 页面上按下鼠标按键，并将鼠标移动到页面之外， 
然后松开鼠标按钮。现在，移动鼠标再回到 FingerPaintl 页面。虽然己经松幵了鼠标按钮， 
但程序还在 继续® 线！这显然错了(但 我肯定 你见过这种“混乱”程序) 。如果 OnPointerPressed 
方法通过字典中己有的关键字把条0添加到字典中，再按下鼠标按钮就会产生异常。不同 
于触屏或手写笔，所有的鼠标事件都有相同的 ID 。 

我们来解决这些问题。 


13.3 捕获指针 

为了更好理解 Pointer 事件序列，我写了一个 PointerLog 程序，用来记录在屏幕上输入 
所有的 Pointer 事件。程序的核心是一个称为 LoggerControl 的 UserControl 。 
LoggerControl . xaml 文件中的 Grid 已经被指定了名称，但其他均为空： 

项 R: PointerLog I 文件： LoggerControl.xaml { 片段 } 

<UserControl … > 

<Grid Name«"contentGrid" Background="Transparent" /> 


</UserControl> 


该代码隐藏文件覆写了全部 8 个 Pointer 方法，所有方法都调用一个名为 Log 的方法， 
并含事件名称和事件参数。和所有 Pointer 程序一样，定义 Dictionary ， 但其中的值并不是 
简单的对象。为了用于存储每个手指信息，我在 LoggerControl 开头定义了一个名为 
Pointerinfo 的类。 


项月 ： PointerLog | 文件 ： LoggerControl .xaml.c 
public sealed partial class LoggerControl : 


public StackPanel stackPanel; 
public string repeatEvent; 
public TextBlock repeatTextBlock; 

)； 



public LoggerControl() 

( 

this.InitializeComponenc(); 

) 

public bool CaptureOnPress ( set; get; } 


protected override void OnPointerEntered(PoincerRoutedEventArgs args) 

( 

Log("Entered", args); 
base.OnPointerEntered(args); 


protected override void OnPointerPressed(PointerRoutedEventArgs args) 
( 

if (this.CaptureOnPress) 

CapturePointer(args.Pointer); 


Log("Pressed", args); 
base.OnPointerPressed(args); 

) 

protected override void OnPointerMoved(PointerRoutedEventArgs args) 
( 

Log("Moved", args); 
base.OnPointerMoved(args); 


protected override void OnPointerReleased(PointerRoutedEventArgs args) 

{ 

Log("Released", args); 
base.OnPointerReleased(args); 


protected override void OnPointerExited(PointerRoutedEventArgs args) 
( 

Log("Exited", args); 
base.OnPointerExited(args); 


protected override void OnPointerCaptureLost(PointerRoutedEventArgs args) 

( 

Log("CaptureLost", args); 

base.OnPointerCaptureLost(args); 



override void OnPointerCanceled(PointerRoutedEventArgs 


Log("Canceled", args); 

base.OnPointerCanceled(args); 


protected override void OnPointerWheeli 
{ 

Log("WheelChanged", a rgs); 
base.OnPointerWheelChanged(args); 






stackPanel 
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if (eventName »■ "Moved" || eventName =* "WheelChanged") 


pointerlnfo.repeatEvent = eventName; 
pointerInfo.repeatTextBlock - txtblk; 



pointerlnfo.repeatEvent * null; 
pointerlnfo.repeatTextBlock = null; 


public void Clear() 



contentGrid.Children.Clear(); 



Log 方法似乎很复杂，但每次碰到事件参数中新的 Pointerld 值时，就会给 Grid 新增一 
列，在顶部放置 TextBlock , 用来表明 ID 和设备类型，并把条目添加到字典。而该 1 D 的所 
有后续事件都会#放进该列，但连续的 PointerMoved 和 PointerWheelChanged 事件不会获 
得额外条目。不能滚动，而目.最终有很多列，但是公共 Clear 方法会把一切都恢复到原始 
状态。 

对于该控件， LoggerControl 只得到 Pointer 事件。为了缓解手指在控件之间移动时产 
生的检查，我做了一个 LoggerControl , 页面顶部为程序名称，而底部是三个按钮。 

项 N: PointerLog I 文件： MainPage.xaml ( 片段 > 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush) H > 
<Grid.RowDefinitions> 

<RowDefinition Height»"Auto w /> 

<RowDefinition Height*"*" /> 

<RowDefinition Height="Auto" /> 



HorizontalAlignment= M Center" 
Margin:"12" /> 


<local : LoggerControl x : Name="logger" 



<Button Content="Clear" 
Grid.Column="0" 







HorizontalAlignment="Center" 
Click="OnClearButtonClick M /> 


<ToggleButton Name="captureButton" 

Content 3 "Capture on Press" 

Grid•Column:"1" 

HorizontalAlignment="Center" 
Checked="OnCaptureToggleButtonChecked" 
Unchecked-"OnCaptureToggleButtonChecked" /> 



请注意，只有触发 ToggleButton 时，最后-个 Button 才可用。 
代码隐藏文件只处理按钮(稍后讨论)。 


项 PointerLog | 文件： MainPage.xaml.cs { 片段 } 
public sealed partial class MainPage : Page 



public MainPage() 



void OnClearButtonClick(object sender, RoutedEventArgs args) 



void OnCaptureToggleButtonChecked(object sender, RoutedEventArgs args) 
{ 

ToggleButton toggle = sender as ToggleButton; 
logger.CaptureOnPress = toggle.IsChecked.Value; 


void OnReleaseCapturesButtonClick(object sender, RoutedEventArgs args) 



void OnTimerTick(object sender, object args) 

{ 

logger.ReleasePointerCaptures(); 
timer. Stop 0 ; 


从下图所水的屏幕上可以看到，每次手指按压屏幕都会得到唯一的 ID , 并且仅牛成5 
个事件。每个新的系列手写笔事件(使用相同编号顺序触屏)也都会得到各自的 ID 和其他几 
个事件。鼠标的 ID 总是1。 



字母 C 和 R 表小 • Pointer 对象的 IsInContact 和 lslnRange 厲性的 true 值。正如你看到的， 
手写笔触碰屏幕或按卜鼠标按钮时，町以通过 lslnRange 属性来区别将要发生的 
PointerMoved 件。 

在默认情况卜只有指针在元桌的边界之内时，素才能获得 Pointer 输入。而这有时 
可能会导致信息 丢失。 为了方便演示，我有意设汁一个程序， LoggerControl 不会延伸到牿 
个屏幕 A 度。 h 方区域是程序标题，而卜方是按钮区域。 这些 地方是 MainPage 领域。这种 
配置可以让你实验从一个元素到另一个元素的输入。 

例如.触碰 PoimerLog 屏幕的中间某个地方，手指四处移动，然后将手指移动到顶部 
标题区域或底部按钮区域，之后手指离幵屏辂。程序不会收到 PointerReleased 货件，并且 
也不知道 己释放 指针。程序永远+会得到另一个特定 1 D 号码的，件，而仍处在无知状态。 
字典中的条 tl 永远也不会删除。 

与之类似，触碰屏嵇的顶部或底部区域.然后手指移动到中心区。程序会注册 
PointerEntered 和 PointerMoved 讲件.而 + 是 PointerPressed 亊件。 

跟踪特定指针往往需要继续获取输入，即使指针漂移到元岽之外。得不到指针输入就 
说明 FingerPaintl 程序有 缺陷。 

通过调用 fh UlElement 定义的 CapturePointer 方法，就町以得到你想要的称为“捕捉指 
针”过程。该方法带 Pointer 类型参数，并返回布尔值.以表明指针捕获是否成功。什么时 
候+成功？如果在 PointerPressed 之前、之间或之后调用 CapturePointer , 就+成功。 

正是出 T 该原冈(同时 出于程 序的优 雅性) 只冇在 PointerPressed 爭件执行过程中调用 
CapturePointer 才真[卜:有意义。 M 过在特定元無 I :.按下手指(手写笔或鼠标按钮)，就表尔用 
户希領4该元素进行交乜，即使手指有时移到元素以外的其他地方。 

如果手指按〗1 PointerLog 屏幕底部的 Capture on Press 按钮，程序就会在 
OnPointerPressed 覆 "i 期间调用如卜 指令： 


现在，如果按压 PoimerLog 程序的中心区域，把 T - 指移到顶部或底部，然 G 放开，程 





序会记录 PointerReleased 事件 、 PointerExited 以及之后的最终 PointerCaptureLost 事件。 

程序可以得到所有调用 PointeiCaptures 捕获指针，并通过调用 ReleasePointerCapture 
释放特定捕获，或者通过多个 ReleasePointerCaptures 释放所有指针捕获。 

在实际应用中，很容易直接忽略 PointerCaptureLost 事件，但这可不是好事。如果 
Windows 有一些紧急情况需要和用户沟通，可以从程序直接拿走指针捕获。我在 Windows 
8中还未见过这种情况，但过去是通过系统模态对话框来显示——该对话框非常重要，要 
先得到用户的所有输入，再获得释放。 

为了演示这种情况，我定义第三个按钮把 DispatcherTimer 设置为五秒钟，然后通过调 
用 ReleasePointerCaptures 给 LoggerControl 得到 结果。 发生这种情况时， L 1 •被捕获的指针就 
会触发 PointerCaptureLost 事件。如果指针仍然在元素之上，就会继续接收其他指针事件， 
但如果移到元素之外，则无法接收。 

如果应用收到总外的 PointerCaptureLost , 此时怎么办则取决于应用。例如，对于手绘 
程序，你能想把 PointerReleased 逻辑移入 PointerCaptureLost . 并同等对待意料及非意料 
的捕获 损失。 

或者说，完全丢弃该特定的绘图事件，这可能也是合理的。 

車实上，可能需要在程序中添加这项功能。比如你决定用户应该能按 Esc 键来停止正 
在运行的绘图 事件。 为此，你可以通过直接调用 ReleasePointerCaptures 。 

以下 FingerPaint 2 程序完成的就是这项功能。 XAML 文件和 FingerPaintl 相同，因此代 
码隐藏文件也相同，但以下除外。 

项 H: FingerPaint2 丨文件： MainPage.xaml.cs ( 片段 > 

public sealed partial class MainPage : Page 


public MainPage() 





et information from event arguments 
id = args.Pointer.PointerId; 


f ID is in dictionary, abandon the drawing operation 
(pointerDictionary.ContainsKev(id)) 






if (args.Key = VirtualKey.Escape) 
ReleasePointerCaptures(); 


base.OnKeyDown(args); 

) 

» 

在构造函数中，为了能让元素接收键盘输入，必须把 IsTabStop 属性 设置为 ime 。 任何 
时间，只有一个元素可以接收键盘输入。这就是所谓键盘“焦点”元素，而且有一些控件 
通过特殊外观来表明包含了键盘焦点，例如虚线。元桌被触碰时或者(在这种情况 F ) 在 
OnPointerPressed 事件期间，往往 uj •以通过调用 Focus 方法来给元素己赋予键盘焦点。该 
覆写方法通过调用 Focus 方法和 CapturePointer 来结束处理。 

OnPointerCaptureLost 方法从 Grid 中删除 Polyline 并从字典.中删除 ID » 然而，手指离 
开屏幕之后. PointeiCaptureLost 事件会正常发生，闵此，只要页面没有调用 
OnPointerReleased . ID 就还会在字典中。 

OnKeyDown 方法得到按键，因而为 Esc 键调用 ReleasePointerCaptures 了。如果没有捕 
获到指针，调 用就没 有任何效果。 

试试 FingerPaintl 所定义的问题行为，你会发现该版本不存在这个问题丫》另外，吋 
以在屏幕上绘图井按下 Esc 键，正在 W 的东西部会消失，而手指不会起任何作用，肓到松 
开并再次按下。（希望你就是想要这个效果)。 

13.4 编辑弹出菜单 

我们接下来给程序增加编辑功能。如果鼠标右键点击现有 Polyline (或做一些相当于用 
手指或手写笔做的事情)就会弹出小菜单，并出现 Change Color 和 Delete 这两个选项。 

前两个 FingerPaint 程序中，如卜创建、初始化并添加 Polyline 到 Grid ， 触碰 字典： 

// Create Polyline 

Polyline polyline « new Polyline 

( 

Stroke = new SolidColorBrush(color) , 

StrokeThickness - 24, 

)； 

polyline.Points.Add(point); 

// Add to Grid 

contentGrid.Children.Add(polyline); 

// Add to dictionary 

pointerDictionary.Add(id r polyline); 

对于 FingerPaint 3, 我们来添加一些额外的代码， 设置 Polyline 两个事件的处理程序。 
目标是通过处理程序力 Polyline 的 RightTapped 事件显示弹出菜单。 

项目： FingerPaint3 丨文件： MainPage.xaml.cs ( 片段 > 

protected override void OnPointerPressed(PointerRoutedEventArgs args) 
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Polyline polyline = new Polyline 

{ 

Stroke = new SolidColorBrush(color), 
StrokeThickness = 24, 

)i 

polyline.PointerPressed += OnPolylinePointerPressed; 
pjolyline.RightTapped += OnPolylineRightTapped; 
polyline.Points.Add(point); 


虽然我们只关心 Polyline 的 RightTapped 淇件，但我也为 PointerPressed 事件设 S 了处 
理程序。该处理程序虽然没有 什么总 思，但非常重要。 

项目： FingerPaint3 I 文件： MainPage.xaml.cs ( 片段 > 

void OnPolylinePointerPressed(object sender, PointerRoutedEventArgs args) 

t 

args.Handled * true; 

) 

你一定想试试这个+带特定处理程序的程序，因为如果触发 PointerPressed 事件，该事 
件就会与 S h 方 d 启用用户输入功能的元素相关联。如果点击或心键点击 Polyline 而不是 
Mai 叩 age 的表面，就会触发该 Polyline 的 PointerPressed 事件。 

然而， PointerPressed 是路由堺件，第3章曾经讲过，路由事件会顺着可视树“走”， 
也就是说如果 Polyline 对该事件没有兴趣，则前往 Mainpage , 即假定 你想® 新图形。为了 
防止程序中发牛.这种情况， Polyline 通过把 車件参 数中的 Handled 属性 设背为 tme 来处理 
PointerPressed 1 好件。这样■以防1卜.饵件回到 Mainpage 。 

这个弹 出菜吶 逻辑发生在 RightTapped V 件中。 

项 R: FingerPaint3 | 文件： MainPage.xaml.cs ( 片 段） 

async void OnPolylineRightTapped(object sender, RightTappedRoutedEventArgs args) 

( 

Polyline polyline = sender as Polyline; 

PopupMenu popupMenu = new PopupMenu(); 

popupMenu.Comnands.Add(new UICommand("Change color", OnMenuChangeColor , polyline)); 

popupMenu.Commands.Add(new UlCommand("Delete", OnMenuDelete, polyline)); 

await popupMenu.ShowAsync(args.GeCPosition(this)); 

) 

正如第 8 章所演示， PopupMenu 很容易使用。创建对象后，圾多吋以为菜单添加6个 
项目。毎个项0包含一个文本标签、回调以及一个帮助回调识别事件的可选对象。 
ShowAsync 方法把菜中 . feU ; •在特定 位置。 

通过加载回调方法的 IUlCommand 参数的 Id 厲性值，处理程序•以获取传递给 
UlCommand 构造函数的 M 终参数。 

项 FingerPaint3 丨文件： MainPage.xaml .cs ( 片 段） 
void OnMenuChangeColor(IUlCommand conmand) 

I 

Polyline polyline = command.Id as Polyline; 

rand.NextBytes(rgb); 

Color color ■ Color. FromArgb (25*5, rgb 10], rgb [ 1 ], rgb 【 2 ”； 

(polyline.Stroke as SolidColorBrush).Color = color; 

) 

void OnMenuDelece(IUlCommand command) 


Polyline polyline = command.Id as Polyline; 
contentGrid.Children.Remove(polyline); 
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我相信你明 ri 如何用鼠标心键单击 Polyline 。 触碰时，需要将手指稳定放在 Polyline 上 
一会儿， 然后再 松开。如果停留时间足够，就会出现一个正方形。同样.用手写笔的时候 
要停留一会，直到看到一个圆形之后再松开。出现如下图所示的菜单。 



当你的手指或手写笔停留 在屏辂 h 时，你所看见的方形和圆形实际 I :都和 Holding 事 
件相关联。如果把 Polyline 的 IsHoldingEnabled 属性设 - W .为 false , 就不会出现矩形和圆， 
用户也可能不确定需要按多长时间=在用户从屏嵇 I : 笮起 手指或手写笔之前，都不会触发 
RightTapped 'll 件。 

FingerPaint 3 中的 OnMenuDelete 方法实际 I •.有-•个小错误。如果手 指画一 条线，而另 
一个手指激活那条线的菜单，会使 OnMenuDelete 从屏幕上删除 Polyline , 而不会移除带 
Polyline 的字典条 H 。 虽然这样不会有坏结果，但会导致字典中积累一些废弃条目。解决该 
问题的逻辑必须能够搜索 7 ft 中被刪除的 Polyline . 然 f 删除。 

正如第3窜所演示的路由事件，无论什么时候处理不同元素产生的负件，都 hJ ■以用各 
种方法来进行彳 f 件处理。例如，在 Mainpage t ； OnPointerPressed 覆写可 以整合我放在 
OnPolylinePointerPressed 中的逻辑，你可以在 OnRightTapped 港写中执彳/•所有 RightTapped 
处理。你耍做的是检忾 U 件参数的 OriginalSource 域性. 以确定输入是来自 Polyline 还是 
MainPage o 

该程序有一个小缺点就是无法从现有线 I :的某一点开始 M 另一条线。 Polyline 收到的任 
何 PointerPressed 事件都会被标记为 Handled ， 并丢弃。 

如果想给用户两种选抒，怎么办？如果用户按住一个现有 Polyline 并开始移动，则出 
现新图形。如果用户按卜 '并 保持，则出现菜笮。 

M 简中.的；/法吋能是放弃使用 RightTapped 事件，而通过 Pointer 逻辑来处理。如果 
OnPointerPressed 发生于现有 Polyline . 则可以把 DispatcherTimer 设置为1秒钟，但如果 
OnPointerMoved 发生了，即表明手指移动的距离大丁•预先设定的标准，则取消该 i | •时器(并 
开始绘 Pi 操 作)。 如果定时器触发，则! nUi 菜单。 
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13.5 压力灵敏度 

通过各个 FingerPaint 程序来绘制的线条都是一种粗细笔画(准确说是24像蒺)，但一些 
触控设备能区分触碰的轻重，真正好的 FingerPaint 程序要能响应笔划的粗细轻重。 

手绘程序中有两个属性会影响线条粗细，两#都由 PointerPointProperties 对象所定义， 
而 PointerPointProperties 对象则是由 PointerPoint 类的 Properties 属性返回所得(而 
Properties 属性又是通过调用 PointerRoutedEventArgs 事件参数的 GetCurrentPoint 方法所 
得)。 

第一个属性是 ContactRect , 为 Rect 值，用来 M 示屏幕 I •.的手指(或手写 笔点) 接触区域 
的矩形 边框。 该属性吋能只适用于十分复杂的触控 设备。 而对本书中 我一宵 使用的平板电 
脑，无论是什么指针设备， Rect 总是有 Width 和 Height 的0值。对于第一代微软 Surface 
平板电脑， Width 和 Height 值都是小整数，如丨、2和3,似乎不会有更大值。（但我可能 
错 了。） 

第二个 M 件是 Pressure . float 值，范_在0和1之间。我在本书中一直使用的平板 
电脑，手指和鼠标的 Pressure 默认值是 0.5, 但对丁•手写笔，该值可变，因此，我能冇机会 
试 一试。 （在第一代微软 Surface 平板电脑中， Pressure 值始终为0.5。> 

为简中-起见， Fi n g er Paim 4 程序不包括 Esc 键处理和编辑功能，但实现了指针捕获 。 M 
大的区别在 - T •必须放弃通过 Polyline 方法_阁，因为 Polyline 只有一个 StrokeThickness 屈 
性。在新程序中，每个笔划都必须巾颜色相同的申-一的短线条构成，而且毎个独特 
StrokeThickness 都通过 Pressure (fiil •算而 W 到，但颜色都相同。 lli 就是说，字典需耍包含 
Color 类型的值(或史好有 Brush 类型)以及前一个 Point 的值。现在有了它们，来定义我所 
称的 Pointerlnfo 的自定义结构。 

项 FingerPaint4 丨文件： MainPage.xaml.cs ( 片段 > 

public sealed partial class MainPage : Page 



public Brush Brush; 
public Point PreviousPoint; 

) 

Dictionary<uint, Pointerlnfo pointerDietionary = new Dictionary<uint, PointerInfo>(); 
Random rand = new Rand<xn (); 
byte[] rgb » new byte[3]; 

public MainPage() 


protected override void OnPointerPressed(PointerRoutedEventArgs args) 
( 

// Get information from event arguments 
uint id * args.Pointer.PointerId; 

Point point = args.GetCurrentPoint(this).Position; 
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rand.NextBytes(rgb) ; 

Color color = Color.FromArgb(255, rgb[0 J # rgb 【 l], rgb[2]); 


// Create Pointerlnfo 



PreviousPoint ■ point. 

Brush = new SolidColorBrush(color) 


// Add to dictionary 

pointerDictionary.Add(id, pointerlnfo); 

// Capture the Pointer 
CapturePointer(args.Pointer); 


base.OnPointerPressed(args); 


protected override void OnPointerReleased(PointerRoutedEvenCArgs args) 

{ 

// Get information from event arguments 
uint id = args.Pointer.PointerId; 

// If ID is in dictionary, remove it 
if (pointerDictionary.ContainsKey(id)) 
pointerDictionary.Remove(id); 

base.OnPointerReleased(args); 


protected override void OnPointerCaptureLost(PointerRoutedEventArgs args) 

{ 

// Get information from event arguments 
uint id = args.Pointer.PointerId; 

// If ID is still in dictionary, remove it 
if (pointerDictionary.ContainsKey(id)) 
pointerDictionary.Remove(id); 

base.OnPointerCaptureLost(args); 

) 

\ 

以前的 PointerPressed 处理程序创建了 Polyline , 赋 f 其初始点，并将其添加到 Grid 和 
Dictionary 中。 而在该程序中，它只创建 Pointerlnfo 值，并添加到字典中。更多功能实现在 
PointerMoved 处理程序中，因为我决定用 GetlntermediatePoints , 而不使用 GetCurrentPoint , 
结果(至少在理 论上) 在微软 Surface 平板上的笔触更流畅。但我觉得有点奇怪，这些点都以 
相反顺序集合在一起。 

以下代码通过这些点来进行循环。对于每个新点和前一个点，会构造 Line 元索并添加 
到 Grid 中。在 Pointerlnfo 值中，最后一个点取代前一个点。 

项目： FingerPaint4 | 文件： MainPage.xaml.cs ( 片段 > 

protected override void OnPointerMoved(PointerRoutedEventArgs args) 

( 

// Get ID from event arguments 
uint id = args.Pointer.PointerId; 

// If ID is in dictionary, start a loop 
if (pointerDictionary.ContainsKey(id)) 







Stroke = pointerInfo.Brush, 
StrokeThickness » pressure • 24, 
StrokeStartLineCap - PenLineCap.Round, 
StrokeEndLineCap = PenLineCap.Round 



II Update Pointerlnfo 
pointerlnfo.PreviousPoint = point; 

) 

II Store Pointerlnfo back in dictionary 
pointerDictionary[id] = pointerlnfo; 



注意， StrokeThickness 设置为 Pressure 值的 24 倍。其结果是线条 ig 大为 24, 而对丁非 
压力敏感设备线条为12»还要注总， StrokeStartLineCap 和 StrokeEndLineCap 厲忭设背为 
Round 。 试试注释掉这些属性设符看线条突然改变时会发生什么情况。叫条短线之间 
有角度，因此会出现小空白。而线杞会盖住这些空 ft 。 

下图这件小艺术品是我完全用手写笔完成的。 
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请注意，如果使用压感输入设备进行渲染，笔划会优美精妙得多。 

就我的经验而言， PointerMoved 事件每秒可触发100次，这比视频显示器的帧速率快， 
但还是没有极端有力的手指快。 

13.6 平滑锥度 

你有没有发现，解决了一个问题之后常常又会引出另一个问题？压力灵敏度是手绘程 
序的一个®要特点。然而，如果在 FingerPaint 4 中如果用压力感应笔快速画东四，你可能 
会注意到线条好像没有产生正确的锥度。相反，锥度会随着不连续跳动而培加或减少(见 
下 图)。 



当然会这样。曲线右下部分的每个片段都是一个自带 StrokeThickness 的 Line 元素。我 
用这种速度_曲线时压力变化很大，因此造成了线条不连续跳跃。 

如果你认为特定 Line 元索只能有一个恒定的 StrokeThickness . 那么解决这个问题就会 
非常困难。但解决方案其实很简单(至少在概念 上)： 不要为每个事件_一个 Line , 而是画 
—个已填充的 Path , 该 Path 由两条线所连接的两个不同半径的圆弧组成。 

为了更容易一点，可以考虑 Vector 结构，除了 Windows Runtime , 所有现代操作系统 
都有它。以下结构，我称之为 Vect 0 r 2( “2” 指两个维 度)， 它只是第14章中一个更大的库 
的一部分。冈此，采用长命名空间名称。 


项 R: FingerPaint5 | 文件： Vector2.cs 

using System; 

using Windows.Foundation; 



public struct Vector2 



public Vector2(double x, double y) 



public Vector2(Point p) 












public override string ToStringO 
{ 

return String.Format<""01 ⑴ X, Y); 


FingerPaint 5 通过前一个点保存之前的半径(根据压力设定)。在卜图中，我用两个有独 
立半径的圆来代表两个连续手指的位置。如下图所示，较小圆的圆心为 cO 、 半径为 rO , 而 
较大圆的圆心为 cl 、 半径为 rl 。 



目标是获得 Path , 包括两个圆圈和两者之间的区域。要做到这一点，必须用一条线连 
接两个圆，而同时两个圆相切，这需要一点儿技巧(从数学上 讲}。 因此，我们先用线条连 
接两个圆的圆心，标记为冰见下图)。 





通过 Vector 2 值可以获得线条长度以及表示其方向的正规化 向最: 


Vector2 vCenters = new Vector2(cO) - new Vector2(cl); 
double d - vCenters.Length; 
vCenters = vCenters.Normalized; 


现在，我们根据 d 和两个圆的半径来定义另一个长度 e 。 点 F 为 e 到 cO 的距离，其方 
向和两个圆心之间的矢量 相同： 



之所以称之为 F , 是因为它是一个“焦点”。我认为 以尸为 起点的线会与两圆都相切, 
也就是说.切线与半径线构成的是直角(见下图>。 



我这么想是因为直线 e 的定义方式。 e 与/0的比与 c / 加 e 与 rl 的比是相同的。吋以貞 
接如下计算角 0( 在上图右侧)： 

double alpha = 180 * Math.Asin(rO / e) / Math.PI; 


如果 Math.Asin 方法的参数大于 1, 则方法返回 NaN (非数字)。只有当 rO 加 c / 的和小 
T - rl (也就是小圆被完全包大圆内)时，才有可能发生这种情况。因此，这个问题吏容易被 
预测。 

通过勾股定理吋以计算得到 F 到切点的 长度： 

double legO = Math.Sqrt(e * e - rO * rO); 

double legl = Math.Sqrt((e + d) * (e + d) - rl * rl); 

Vector 2 结构有一个简便的 Rotate 方法，可以通过 a ? 卩度来旋转 vCenter 矢量： 




变量名的 “Right” 和 “Left” 两个部分可从 尸视角 得到。在图中， vRight 矢量和圆顶 
部切线相对应， vLeft 和底部切线相对应。有了矢量和长度，就可以计算实际 切点： 

Point tOR - F + legO * vRight; 

Point tOL = F + legO * vLeft; 

Point tlR = F + legl ， vRight; 

Point tlL = F + legl * vLeft; 


这些点可以用来构造 PathGeometry . 包含 2 个 ArcSegment 对象和2个 LineSegment 对 
象，如下图中的粗线轮廓。 



注意，小圆的 ArcSegment 始终小于180度，而大圆的 ArcSegment 则始终大于180度。 
这些特点会影响 ArcSegment 的 IsLargeArc 特性。同时请记住，通过规定关闭图，可以暗示 
创建两个 LineSegment 对象的其中之一。 

Fing er p a im5 中定义的实际算法如下所示。请注意，算法还必须实现相对简笮的情况， 
即两个半径相同或一个圆完全包含另外一个圆的 时候： 

項 FingerPaintS 4 文件： MainPage.xaml .cs ( 片段 > 
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// Arc around larger circle 
ArcSegment arclSegment = nev< 





Point 




return pathGeometry; 
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此时应该能完全理解 FingerPaint 5 的其余部分。 OnPointerReleased 和 
OnPointerCaptureLost 覆写与 FingerPaint 4 相同 。内部 Pointerlnfo 类现在包括 PreviousRadius 

字段。 

项 N: FingerPaint5 | 文件： MainPage.xaml .cs ( 片 段 } 
public sealed partial class MainPage : Page 
( * 
struct Pointerlnfo 
{ 

public Brush Brush; 

public Point PreviousPoint; 

public double PreviousRadius; 



Random rand = new Random(); 


byte【]rgb = new byte[3 】； 


public MainPage() 

( 

this.InitializeComponent(); 


protected override void OnPointerPressed(PointerRoutedEventArgs args) 

( 

II Get information from event arguments 
uint id » args.Pointer.Pointerld; 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 


// Create random color 
cand.NextBytes(rgb); 

Color color » Color.FromArgb(255, rgb[0], rgb[11, rgb[2J); 


// Create Pointerlnfo 

Pointerlnfo pointerlnfo - new Pointerlnfo 

\ 

PreviousPoint = pointerPoint.Position, 

PreviousRadius ■ 24 * pointerPoint.Properties.Pressure, 
Brush = new SolidColorBrush(color) 

)； 

// Add to dictionary 

pointerDictionary.Add(id, pointerlnfo); 

// Capture the Pointer 
CapturePointer(args.Pointer); 
base.OnPointerPressed(args); 


protected override void OnPointerMoved(PointerRoutedEventArgs args) 

( 

// Get ID from event arguments 
uint id = args.Pointer.PointerId; 

// If ID is in dictionary, start a loop 
if (pointerDictionary.ContainsKey(id)) 
i 

Pointerlnfo pointerlnfo = pointerDictionary 【 id]; 

IList<PointerPoint> pointerpoints = args.GetIntermediatePoints(this); 
for (int i » pointerpoints.Count - 1; i >= 0; i—) 



现在，在压力感应装置快速_图，线条锥度也会很平滑，不会断裂 (见卜 图)。 


13.7 如何保存图画 

以上手绘程序都不能保存图画，如何实现该功能呢？ 

毎个程序都通过把 Polyline 、 Line 或 Path 元素添加到 Grid 来进行绘 Pi 。 保存图_的方 
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法可以 是访问 这些对象并把所有点和其他信息保存到一个文件中，也吋以是 XML 格式文 
件。此后添加功能进行冋叔并根据这些信息来创建新的 Polyline 、 Line 或 Path 元尜。 

似你" I 能吏倾向 T 保存亂 l » i 的位圈。（就传统而_图程序处理矢最.而绘图程序处 
理位图。 ） 黎实 L , FingerPaint 程序对位图 L •.执行其绘画是有道理 的。 

这是能够实现的，但居然那么简单。垴简单的方法是用 WriteableBitmap , 但你必须实 
现 t ' l 己的绘副逻辑，以便能在位图 I :渲染线条。第14章会介绍具体办法。也可以通过 
DirectX , 再加一些 C # 编码来实现。第15章将对此展开讨论。 

13.8 现实和超现实手绘 

诚近几年，绘福程序匕经尝试模仿现实活的绘阁材料，如铅笔、粉笔和水彩。当然， 
想这么做炁嬰综合视觉灵敏和编程技能，同时还 S : 有一定的随机性。 

当然，你也吋以反方向，在屏嵇 h 渲染一些在现实世界永远不会遇到的东叫 。 Whirligig 
程序和 FingerPaint 系列程序在结构 I •.非常相似，但前#渲染的螺旋如下图所水。 







Whirligig 程序实现了指针捕获,但未实现 Esc 键终止，因此， OnPointerReleased 和 
OnPointerCaptureLost 沼写之前儿个项 I 」_ -样。对丁-毎个手指笔 il « i , 程序部会像 1 j 1 . 期版本 
一样渲染中一 Polyline , 似 Polyline H 存一个像袭料1且以岡环绕。 

项 H: Whirligig | 义件： MainPage.xaral .cs ( 片段 > 
public sealed partial class MainPage : Page 
( 

const double Radius * 24; 
const double Anglelncrement 



public Point LastPoint; 
public Polyline Polyline; 
public double Angle; 


radians 


pixel 
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Dictionary<uint / TouchInfo> pointerDictionary - new Dictionary<uir 



MainPage() 



protected override void OnPointerPressed(PointerRoutedEventArgs 

{ 

// Get information from event 


uint id = args.Pointer.Pointerld; 

Point point * args.GetCurrentPoint(this).Position; 



// Add to Grid 



// Create Touchlnfo 


Touchlnfo 



// Add to dictionary 
pointerDictionary.Add(id, touchlnfo); 



CapturePointer(args.Pointer); 
base.OnPointerPressed(args); 


protected override void OnPointerMoved(PointerRoutedEventArgs args) 









// Rotate the point 



// Add to Polyline 
polyline.Points.Add(pt); 


pointerDictionary[id).LastPoint - point; 
pointerDictionary[id].Angle = angle; 

base.OnPointerMoved(args); 


有了 Polyline . Touchlnfo 类会存储 LastPoint 值和 Angle 值。对于毎个 PointerMoved 

事件，程序会把当前点到前一个点的距离划分为像素大小长度。对丁-这些像素大小 L < :度， 
程序会附加约 30 度的圆形图案。 （30 度是 Anglelncrement 常量。 ） 程序不会渲染实际点，而 
是积累的角度来旋转点，并添加到 Polyline 。 

13.9 触控钢琴 

并非所有触屏应用都采用相同模式。例如，想想触屏钢琴 键盘。 很 w . 然.你想要能用 
手指演奏和弦，因此.这是 Pointer 事件的工作，而不是 Manipulation 車件的「-作。 

但你真正想做的是手指 h K 敲击让触屏钢琴键盘，从而产生滑音。如果做不到这一点， 
你 ft 定会认为钢琴坏了。也就是说，你 Kf 能并不 M 关心 PointerPressed fll PointerReleased 。 
当然，你》]•以按 F —个键而松开另一个键，但除此之外，你会用手指扫在许多其他按键而 
进行演奏。 

播木上，有两种方法来构造钢琴键盘。对丁-整个键盘，可以使用一个控件，也 iif 以使 
用许多控件(我说“许多”的意思其实是一个控件对应一个按 键)。 

中个 控件必须能控制所有按键并用按键来比较指针位置，从而评估 PointerMoved 事件。 
耑耍能跟踪每根手指.以确定 PointerMoved 事件表明按键何时进入按键边界以及何时离开 
按键边界。这是经典“命中测试”.即检杳指针位 S , 以确定指针是否位丁-边 界内。 

然而，如果毎个按键都有独立的控件，则不需要执行命中测试。如果按键会获得 Pointer 
事件，则 Pointer 在控件的边界之内(除非控件己捕获指针，否则指针捕获在此应用中没有 
任何意 义)。 

实现钢琴键需要什么 Pointer 求件？ +要一开始就想着按下再松开。吋以先想想滑音。 
如果我们讨论的只是触屏键盘，则只志要两个 Pointer 唞件： PointerEntered 和 PointerExited 。 

然而，你吋能想让键盘能够合理响应鼠标和手写笔。如果还没有按下鼠标按钮，钢琴 
按键会从鼠标获得 PointerEntered 和 PointerExited 淇件， 这是一个 问题。 PointerEntered 处 
理程序盅要检& IsInComact 属性，才能正确处理鼠标和手写笔。 IslnContact 属性对丁•触碰 
事件始终为 true , 但只有按下鼠标按钮(对丁•鼠标)才为 true , 如果手写笔在与屏幕接触，也 
为 true 。 
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此外，考虚笮-一元素时，鼠标和手写笔会在 PointerPressed 之前生成 PointerReleased 事 
件，而在之后 PointerEntered 生成 PointerExited ， 因此也必须处 PP •好 PointerPressed 和 
PointerReleasedo 

现在我们从按键 fl 下而上来构造两个八度的钢琴键盘。以下 Key 类为 Control 派生类， 
不带默认模板，因此没有默认视觉外观。但 Key 类确实定义了 IsPressed 依赖属性以及 
IsPressed 的属性变更处理程序，该程序可以切换 Normal 和 Pressed 两个视觉状态。 

项目： SilentPiano | 文件： Key.cs (片 段 ) 
namespace SilentPiano 













VisualStateManager.GoToState(obj as Key, 


(bool)args.NewValue ? "Pressed" : "Normal", false); 


I 天 I 为可以用两个手指触碰同一个按键，所以控件志要能够跟踪中个手指。但控件并+ 
需要 Dictionary 来保留每个 ID 信息。■以肓接采用 List 。 在 OnPointerEntered 覆写(但只有 
当 IslnContact ' J -] true 的时候)和 OnPointerPressed 中 ， ID 会放进 List 中，在 OnPointerReleased 
和 OnPointerExited 中删除，并会触发在视觉状态变化。如果 List 中至少包含一个条 U ， 
IsPressed 属性则为 true 。 PointerPressed 和 PointerReleased 寧件处理程序只适用 T •鼠标和手 
写笔。 

两个模板 (一 个用于内键， 一 个用于黑键)都在 0 C tave . xa ml 文件中定义。两个模板的区 
別在于 Polygon 大小，而 Polygon 定义了按键的形状和默认颜色。（两个键的形状都是矩形。 
我本来想让白键有+同形状，就像一台真正的钢琴那样，但颜色相同吏简 中一 些，而且所 
需要的模板少得多。）在 Pressed 状态时，两个模板颜色切换为红色。 


项 SilentPiano I 文件： Octave.xainl ( 片段） 



〈Polygon Points="2 0, 78 0, 78 320, 02 320"> 
〈 Polygon.Fill 〉 
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<Polygon Points="0 0, 40 0, 40 220, 0 220"> 

<Polygon.Fill> 

<SolidColorBrush x:Name="brush" Color="Black" /> 
</Polygon.Fill> 




<Storyboard> 

<ColorAnimacionUsingKeyFrames Storyboard.TargeCName="brush" 
Storyboard.TargetProperty="Color"> 



</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 
</Grid> 

</ControlTemplate> 

</UserControl.Resources 〉 



<StackPaneX Orientation="Horizontal"> 

<local:Key Template="{StaticResource whiteKey)" /> 
<local:Key Template="{StaticResource whiteKey}" /> 
<local:Key Template="(StaticResource whiteKey)" /> 
<local:Key Template:"{StaticResource whiteKey}" /> 
<local:Key Template 3 "{StaticResource whiteKey)" /> 
<local:Key Template="{StaticResource whiteKey)" /> 
<local:Key Template="(StaticResource whiteKey)" /> 
<local:Key x : Name="lastKey" 

Template*"{StaticResource whiteKey}" 
Visibility="Collapsed" /> 



<local:Key Template="(StaticResource blackKey}" 
Canvas.Left="60" Canvas.Top="0" /> 
<loca! •: Key Template="{StaticResource blackKey)" 
Canvas.Left="140" Canvas.Top="0" /> 


L:Key Template: 
Canvas.Lef 


'{StaticResource blackKey}" 
=••300" Canvas.Top= ,, 0" /> 


<local:Key Template="[StaticResource blackKey}" 
Canvas.Left-"380" Canvas.Top="0" /> 
<local:Key Template:"{StaticResource blackKey}" 
Canvas.Left»"460" Canvas.Top="0" /> 

</Canvas> 

</Grid> 


</UserControl> 


8 个内键水平排列在 StackPanel 中 ，5 个黑键在 Canvas 中。这种 fldl ： 允许 1*1 键可以定 
义控件大小，而让黑键在白键 t ： 方并覆盖白键的一部分。 

8个 内键从 C 到 C 。 小键盘在很多情况下都从 C 开始、以 C 结束，但在两个八度相连 
的地方，你不想要对相邻 C 键。这就是为什么最后一个按键有 Visibility 的 Collapsed 的 
原因。通过代码隐藏文件把 Visibility M 性设置为 Visible 或 Collapsed , 代码隐藏文件则基 
于 LastKey Visible 依赖项属性的设贾。 

项 R: Silent Piano 丨文件： Octave.xaml .cs ( 片 段） 
public sealed partial class Octave : UserControl 
( 

static readonly DependencyProperty lastKeyVisibleProperty = 

DependencyProperty.Register("LastKeyVisible", 
typeof(bool), typeof(Octave), 




new PropertyMetadata(false, OnLastKeyVisibleChanged)>; 

public Octave() 

{ 

this.InitializeComponent(); 


public static DependencyProperty LastKeyVisibleProperty 

{ 

get { return lastKeyVisibleProperty;) 


public bool LastKeyVisible 

( 

set { SetValue(LastKeyVisibleProperty, value); } 
get { return (bool)GetValue(LastKeyVisibleProperty);) 


static void OnLastKeyVisibleChanged(DependencyCtoject obj, 

DependencyPropertyChangedEventArgs args) 

{ 

(obj as Octave).lastKey.Visibility = 

(bool)args.NewValue ? Visibility.Visible : Visibility.Collapsed; 

) 

) 

剩 F 的事情是把 MainPage . xaml 文件中的两个 Octave 对象实例化，第二个对象 
LastKeyVisible 设置为 true 。 

项 H: SilentPiano 丨文件： MainPage.xaml ( 片段 > 

<Page ... > 

〈Grid Background»"Gray"> 

<StackPanel Orientation="Horizontal" 

HorizontalAlignment* w Center" 

VerticalAlignment="Center n > 

<local:Octave /> 

<local:Octave LastKeyVisible="True" /> 



</Grid> 

</Page> 

如卜图，我现在可以弹奏我喜欢的和弦了(为主要编程语言和音)。 



13.10 操控、手指和元素 

Pointer 箏件的优点是可以追踪申-个手指。而 Manipulation 事件的优点则是不能追踪单 
个手指。 
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Manipulation 亊件把多个手指（“多个”的真 iF . 意思经常是指“两个” >就组合成更 AS 
次的手势，例如捏住、旋转。 这些 手势常见图形变化相 对应： 平移、缩放(虽然仅限在水平 
及乖直方向 I •.的相等比例)以及旋转。捕获足操控的同有特性。惯性也4以 ffl 。 

请记住,把多个手指组合成单 系列 Manipulation 事件，并不是针对整个窗口，而是 
针对处现这些事件的每个元素。 Hi 就是说，吋以使用一个或一对手指来操纵一个元素，而 
使用另一对手指來操作第.个元疾。 

UIEIement 定义/ 5个 Manipulation ft 件，每一个儿素一般都按照 以卜顺 序进行接收(注 
意，前两个事件的名称十分相似)： 

• ManipulationStarting 

• M ani pu lationStarted 

• ManipulationDelta (很多） 

• ManipulationlnertiaStarting 

• ManipulationDelta (更多 > 

• ManipulationCompleted 

Control 类定义了对应 / i : 个咻件的说拟方法，命名力 ManipulationStarting 等等。 

鼠标或手写笔能生成 Manipulation 事件。当手指第•次触碰-个儿尜时，只有在按卜' 
鼠标按钮或手 W 笔触碰屏猫时才行。 T •指首 先触碰儿尜按钮、鼠标点市到元疾或手写笔触 
碰到元素，才 会发牛 .ManipulationStarting #件。 

ManipulationStarted tt 件•般发斗:在 ManipulationStarting 之 N ■论，这 1 [ I 的关 
键同是“ •般 ”）。 随后，手指在屏幕 I :移动，触发大量 ManipulationDelta 車件。如果所有 
手指都离开儿袭，就会停止 ManipulationlnertiaStarting 。 元桌继续屮成表示惯性的 
ManipulationDelta 車件，但 ManipulationCompleted 表示序列结束。 

M 然手指符先触碰元 樹中 .出臥标或按卜 '手 *4 笔)便会 K'k ManipulationStarting ‘ jf 件， 
但该壤件之后并不_一定是 ManipulationStarted 事件，而且 ManipulationStarted UT 能也会延迟。 
问题是，系统必须区分点击或保持实际操作。如果手指(鼠标或手写笔)移动一点点，就会 
触发 ManipulationStarted 。 

例如，如果用扫屏动作触碰元素， ManipulationStarting 之后很快就是 ManipulationStarted 
和多个 ManipulationDelta 事件。但是，把手指按在一个地疗并保持 ft ，就会延迟 
ManipulationStarted II 件一段时间。 

如果用户点击、右键点击或双击屏痛，贝 IJ 不会发生 ManipulationStarted 事件。然而， 
ManipulationStarting 之后可能会触发 Holding 事件，用户也可能移动手指并生成 
ManipulationStarted 以及 1 1 H 牛其余部分。有 f 农明 Canceled 的 HoldingState 域性，也会触发 
另一个 Holding 事件。 

然而 在默认情况卜_,元索+会产生任何 Manipulation 剌牛！ Wffl Manipulation 事件首 
先必须耍袪于树个元 疾。 耍让程序准确指定耑‘提哪些类甩操作， UIElemenl 会定义枚平类增 
ManipulationModes 的 ManipulationMode 属性。(属性名称为单数，枚举名称是复数。） 
ManipulationMode 的默认设置是 ManipulationModes.System . 对丁 •应 用而,就相当于 
ManipulationModes . Noneo 要 A 用操作儿索，半:少耑奴:将其设力另一个 ManipulationModes 
成员。枚举项被定义为位标忐，因此，4以用 OR 运算符（|)其进行位或运算。 
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虽然-■-些应用;相 耍处理 所有5个 Manipulation 事件，但吋以写为只检 ManipulationDelta 
的代码。 

ManipulationTracker 程序就是这种情况。程序显示了 ManipulationModes 枚平项的很多 
CheckBox 控件以及可以操纵的三个 Rectangle 元素。为了简化某些代码和标记，自定义 
CheckBox 派4•:类来存储并显尔 ManipulationModes 成员。 

项 HI: ManipulationTracker | 文件： ManipulationModeCheckBox.es 
using Windows.UI.Xaml.Controls; 
using Windows .UI .Xaml.Input; 


ManipulationTracker 


public 


ManipulationModes 


白定义 CheckBox 的 10 个实例安排在 Mainpage . XAML 的 StackPanel 中，毎个实例都 
用枚平项名称 ( 名称中插入空格史易 读〉 和牿数值 进行识 别。 


项 R: ManipulationTracker | 义件： MainPage.xaml ( 片段） 

<Page … > 

<Page.Resources 〉 

<Style TargetType="local:ManipulationModeCheckBox"> 
〈Setter Property="Margin" Value="12 6 24 6" /> 
</Style> 

<Style TargetType="Rectangle**> 

<Setter Property= M Width" Value="144 M /> 

〈Setter Property="Height" Value="144" /> 

<Setter Property="HorizontalAlignment" Value="Left r 
<Setter Property="VerticalAlignment" Value="Top" /： 
<Setter Property="RenderTransformOrigin" Value="0.J 
</Style> 

</Page.Resources> 


’{StaticResource ApplicationPageBackgroundThemeBrush)" 


nDefinitions> 


: ColumnDe 
i.ColumnD 


efinition Width; 
Definitions> 


<StackPanel 


Name="checkBox 
id.Column:"0"> 


kBoxPanel" 


L : ManipulationModeChec kBox Checked="OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipulationModeCheckBoxChecked" 
Content="Translate X (1)" 
ManipulationModes="TranslateX" /> 


Content="Tr. 


2d="0nMan 
OnManipu 
anslate 


ipulationMcxieCheckBoxChecked" 

ilationModeCheckBoxChecked" 


"TranslateY" 


〈 local : Manipu1ationModeCheckBox Checked="OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipulationModeCheckBoxChecked" 


L : ManipulationModeCheckBox Checked="OnManipulationModeCheckBoxCheckec 
Unchecked="OnManipulationModeCheckBoxChecked" 
Content="Translate Rails Y (8)" 
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L : ManipulationModeCheckBox Checked="OnManipu1ationModeCheckBoxChecked" 
Unchec ked=" OnMan ipu la t ionModeChec kBoxChec ked •’ 
Content«"Rotate (16)" 
ManipulationModes»"Rotate n /> 


〈 local : ManipulationModeCheckBox Checked="OnManipulationModeCheckBoxChecked" 
Unchecked®"OnManipulationModeCheckBoxChecked" 
Content*"Scale (32)" 

ManipulationModes="Scale" /> 


L : ManipulationModeCheckBox ChecJced="OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipulationModeCheckBoxChecked" 
Content="Translate Inertia (64)" 


: ManipulationModeCheckBox Checked="OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipu1ationModeCheckBoxChecked" 
Content="Rotate Inertia (128)" 
ManipulationModes-"RotateInertia" /> 

: ManipulationModeCheckBox Checked»"OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipulationModeCheckBoxChecked" 
Contenf'Scale Inertia (256)" 
ManipulationModes="ScaleInertia" /> 


L : ManipulationModeCheckBox Checked="OnManipulationModeCheckBoxChecked" 
Unchecked="OnManipulationModeCheckBoxChecked" 


iManipulationModeCheckBoxChecked" 
(OxFFFF)" 
todes="All" /> 


</StackPanel> 



〈Rectangle Fill="Red"> 


<Rectangle.RenderTransform> 



〈Rectangle Fill="Green"> 

<Rectangle.RenderTransform> 


<CompositeTransform /> 



<Rectangle Fill=-Blue'.> 

<Rectangle.RenderTrans form> 
<CompositeTransform /> 
</Rectangle.RenderTransform> 



</Page> 


Grid 的较大区域有三个 Rectangle 元素，带 Computerstan 的状态标志三种 颜色： 红色， 
绿色，和蓝色。 

在代码隐藏文件中，通过把与用 OR 运算符选中复选框相关联的枚举项组合在一起， 
任意选中或未选中自定义 CheckBox 控件会导致计算新的 ManipulationModes 值。这种组合 
ManipulationModes 值可以设置为二•个 Rectangle 元素的 ManipulationMode 属性。 

项目 ： ManipulationTracker I 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
( 

public MainPage() 



// Get composite ManipulationModes value of checked CheckBoxes 
ManipulationModes manipulationModes = ManipulationModes.None; 

foreach (UIElement child in checkBoxPanel.Children) 



If ((bool)checkBox.IsChecked) 

manipulationModes |= checkBox.ManipulationModes; 


// Set ManipulationMode property of each Rectangle 
foreach (UIElement child in rectanglePanel.Children) 
child.ManipulationMode * manipulationModes; 


protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs args) 

( 

// OriginalSource is always Rectangle because nothing else has its 
// ManipulationMode set to anything other than ManipulationModes.None 
Rectangle rectangle = args.OriginalSource as Rectangle; 

Compos iteTrans form transform =» rectangle. Render Trans form as CompositeTransform; 



transform.TranslateY += args.Delta.Translation.Y; 
transform.SealeX *= args.Delta.Scale; 
transform.ScaleY *= args.Delta.Scale; 
transform.Rotation += args.Delta.Rotation; 
base.OnManipulationDelta(args); 

) 

) 

程序的最后一部分是 OnManipulationDelta 覆写，即由 Control 类定义的虛拟方法，通 
过 Control 类， Kf 以更容易地访问 UIElement 所定义的 ManipulationDelta 事件。 
ManipulationDelta 是主要 Manipulation 亊件，并表明用户手指参 1 ；;的操作。 

注总， OnManipulationDelta 覆写会把車件参数的 OriginalSource 属性投射到 Rectangle , 
但+会检办投射是否成功。从理论 h 讲， OriginalSource 属性 Kf 以是 MainPage 或 MainPage 
子类。然后，只有 Rectangle 元素 wj ' 操作，因此，只有 Rectangle 元素可以生成 
ManipulationDelta 事件。 

CompositeTransform 设胃.为特定 Rectangle 的 RenderTransform 厲性，覆写获得 
CompositeTransform ， 并搞 丁事 件参数 Delta 属性调整转换的五个属性。 Delta 属性的类型为 
ManipulationDelta , 包含有四个属性的结构。（注意！该结构与提供它的事件具有相同名称！） 
该值表示 k 次 ManipulationDelta 事件后的变化。 

通过这段代码可以访问 P 1 ! 个 ManipulationDelta 属性中的三个。第四个厲性是 
Expansion , '-j Scale 类似，但用像素来表达，而不用乘法缩放因子。 ManipulationDelta 结 
构的 Translation 厲性表•从上一次 ManipulationDelta 車件以来手指移动的平均距离，因此 
这吗值会添加到 CompositeTransform 的 translateX 和 translateY fc 葛性。如果没有运动，这些 
值就是零。 

S 之类似(似处理方式却有所不冋)， ManipulationDelta 结构的 Scale 属性表示从 I •.次事 


件以来手指之间增加的距离。 CompositeTransform 的 ScaleX 和 ScaleY 厲性与该系数相乘。 
(由于 Manipulation If 件不会为水平和乖直缩放提供中独缩放因子，因此，所有操控缩放必 
须各向冋性，即在两个方向都是一样。 ） 如果没有缩放(或尚未启用缩放)，则缩放值为1。 
ManipulationDelta 的 Rotate 域性表示转动手指所 ' j | 起的旋转角变化，并且添加到 
CompositeTransform 的 Rotation 14性。 

如下图所氺，选中几个复选框，就真的 " J ■以 ffl 鼠标、手写笔或多个手指的移动来移动、 
缩放和旋转矩形，甚至一次 II 』以操控两 三个。 



对丁•使用 Manipulation 事件的 程序，规则很简中始终把 ManipulationMode 属性设 W . 
为 Manipulation 元素的或再一个或多个 Manipulation 車件元 桌的: lh 默认值。这样一来，付 
个元索都会牛 成向己 独立的 Manipulation If 件数据流。 也叮以 为元索木身的 
ManipulationDelta 卞件设 W 处现程序，也吋以通过叮视树的源头来处理事件。 

我说过这种操控会如预期发押作用，但并+完全正确。你会发现，除了把 
RenderTranslormOrigin 设 S 为参考点 (0.5, 0.5), 尤论是代码还是 XAML 都没有引用缩放或 
旋转中心。 W 此，所有缩放和旋转部~特定矩形的中心相对应。 

这+是正确行为。例如，假设把一个手指放在接近矩形顶角的地方并保持稳定。可以 
用第：个手指按住对角并进行拖拽或旋转。缩放和旋转结果应该 y 第•个手指相关。换而 
言之，矩形的其余部分 W 绕第一 个手指 进行缩放或绕旋转，而第一个手指处的矩形部分应 
保持在原位。 

解决该 M 题耑 要较力 &杂的逻辑，因此我暂时忽略，到木章; ni / ii 洱卜]■论。 

同时，还吋以使用一些其他类型的操控。有二类惯性操控 ( ujTHP 平移、缩放和旋转 
而且真的 " J •以轻弹或旋转矩形离开屏幕。我稍后会讨论 一些可 以控制惯性程度的方法。 

可以用如下代码设 W . 之前 W 群截图的等效 ManipulationMode 属性： 



ManipulationModes.Scale | 
ManipulationModes.Rotate; 
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但 + 是在 XAML 中口在 XAML 中设置 ManipulationMode 属性仅限丁 • 中 . 一 枚平项， ifli 
在实际应 用中， 很能为 All 。 

如果想使操控只限定 T • 水 f 移动，可以指定 ManipulationModes 的成员 translateX 而不 
是 translateY : 


rectangle.ManipulationMode = ManipulationModes.TranslateX; 

同样，耍使操控只限定 T- 乖育移动，则谣要指定 translateY 而不是 translateX » 
ManipulationModes 的两个枚平项称为 TranslateRailsX 和 TranslateRailsY 。 如果 耍同 
时指定 translateX 和 translateY, 两者则只能按预定方式运行。例如， 



这种配置吋以随意移动水平和 _ 育方向的允素。然后，如果操控从水平方向 h 的移动 
开始，元素就会卡在导轨 1:( 可以这么说 ) ，而 a 所有接下来的移动都限制在水平方向，直 
到抬起手指再从头开始。 

4 之类似，如果操控是从垂育移动开始，这种妃 贾就会 限制丁 • 萌汽 移动： 

rectangle.ManipulationMode = ManipulationModes.TranslateX | 

ManipulationModes.TranslateY | 

ManipulationModes.TranslateRailsY; 


llin 似同时指定两 ？ h 



如果以对角拖动元尜，则 II 了以以仟总方式来移动。但如果开始时就是水 + 或垂貞 移动 , 
元素就会卡在导轨上。 

正如在之前代码中所看到的， ManipulationTracker 程序使用 

ManipulationDeltaRoutedEventArgs 参数的 Delta 属性来吏改 CompositeTransform ： 

transform.TranslateX += args.Delta.Translation.X; 
transform.TranslateY ♦= args.Delta.Translation.Y; 



如 果你检 ManipulationDeltaRoutedEventArgs 的属性 ， 就会发现除了 Delta 属性之外 
还有 Cumulative 属性 ，也为 ManipulationDelta 类别 。 Delta 厲性表 示从 I: —次 
ManipuIationDella $1 件的变化， ifi] Cumulative 则表 /j; 从 I:- 次 ManipulationStarted 的变化。 

你可能怀疑 Cumulative 属性比 Delta 属性史荇易处现。因为吋以把值传送到相应的 
CompositeTransform 厲性，如 卜所 



transform.SealeX = args.Cumulative.Scale; 
transform.ScaleY = args.Cumulative.Scale; 
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有了这些代码在第一次操控元素的时候似乎吋以很好发挥作用。但抬起手指并在同一 
个儿素上尝试另一项操控，元素会跳回到屏铬左上角处它原来的位置！ 

Cumulative 属性并不是从程序开始就进行 MU 十，而是只从特定 ManipulationStarted ’1 J 件 
才进行累积。 

13.11 处理惯性 

Manipulation 事件支持惯性平移、缩放和旋转，但如果+想要惯性，可以直接+设定 
ManipulationModes 。 

如果想随时停止操控或惯性， ManipulationStarted 和 ManipulationDelta 亊件的事件参数 
有 Complete 方法，它 "j 以触发 ManipulationCompleted 事件。 

如果想自己处理惯性，也 kT 以。 ManipulationDelta 和 ManipulationlnerliaStarling II 件的 
事件参数有 Velocities 属性，该属性表示线性、缩放和旋转速度。对 f •线性运动， Velocities 
属性为每毫秒像素，我怀疑这+是直觉单位。我试过用手指快速点击屏幕 h 的对象，可以 
达到每亳秒10个像素，但+会更尚。也就是每秒10000个像素，相当于每秒约100英十， 
或每秒大约8英尺，或每小时大约6英里。 

也提供有默认减速，但如果想己设定，则需要处理 ManipulationInerliaStarting 事件。 
ManipulationlnerliaStartingRoutedEventArgs 类定义 f 以卜三个属性： 

• InertiaTranslationBehavior 类型的 TranslationBehavior 

• InerliaExpansionBehavior 类切的 ExpansionBehavior 

• InertiaRotationBehavior 类型的 RotationBehavior 

InertiaTranslationBehavior 类(例如)能让你按照两种方式来设胃线性减速：以像素为中- 
位的 DesiredDisplacement 属性(即你想使物体运行多远)或以每亳秒平方像素为中•位的 
DesiredDeceleration 属性。两个属性都有 NaN (非数字)默认值。 

DesiredDeceleration 值-般部非常小，但可能要来谈谈物理机制了。 

根据基本物理知识，我们知道给静止物体施加恒定加速度为/时间之后，物体运动的 
距 离为： 

2 

例如，在没有空气阻力的地球表面，物体进行0由落体运动，加速度恒定为每秒32英 
或32英尺每平方秒。把 a 设靑为32,则吋以计算出该物体1秒钟内运行了 16英尺、2秒 
钟运行64英尺、3秒钟运行144英尺。 

速度 v 为时间相对于距离的一阶 导数： 

dx 

v = — = at 
df 

同样，对 f 自由落体的物体， 第丨秒 钟结束时速度为毎秒32英尺，第2秒钟结束时每 
秒为64英尺，而第3秒钟结束时为每秒96英尺。毎过一秒钟，速度增加每秒32英尺。 

减速则是反向过程。根据第二个公式，我们 知道： 
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a = — 

t 

如果物体的运动速度为 v , 经过/秒恒定减速，最终速度变为0。如果屏幕•上的物体运 
动速度为每毫秒5个像#,则可以用该公式来 II •算在固定时间内速度减为零所需的加速度， 
例如，5秒钟或5000毫秒 ： 



FlickAndBoimce 项目也有类似的计算，但可以通过 Slider 来设置减速时间，范围从1 
秒到60秒。 XAML 文件包含 Slider , 己经带 ManipulationMode 设置的 Ellipse 和三个 
Manipulation 事件。虽然 ManipulationMode 设賈为 All ( 因为在 XAML 中没有太多替代方法)， 
但程序只使用平移并通过设置 CaiwasLeft 和 CanvasTop 附加属性而+是通过变换来移动 
Ellipse 。 

项目 ： FlickAndBounce | 文件 ： Main Page, xaml ( 片段） 



Background*"{StaticResource ApplicationPageBackgroundThemeBrush}"> 
ras> 

<Ellipse Name="ellipse" 

Fill^-Red" 

Width="144" 

Height--144 H 
ManipulationMode="All" 

ManipulationStarted-"OnEllipseManipulationStarted" 
ManipulationDelta="OnEllipseManipulationDelta" 
ManipulationInertiaStarting="aiEllipseManipulationInertiaStarting" /> 



Value="5" Minimum= M l M Maximum^.60" 
VerticalAl ignmen 
Margin«"24 0 H /> 



</Page> 


当然，如果物体正好飞过屏幕边缘，任何减速都没用。由于这个原因， ManipulationDelta 
处理程序会检测 Ellipse 何时移出屏幕边缘。 ManipulationDelta 还会移回到视图中，就好像 
从边缘反弹回来并通过 xDirection 和 YDirection 字段对其反转进一步移动。 

注意， 该逻辑使用了 Isinertial 属性。+会通过拖动 Ellipse 经过屏幕边缘来阻止你操控。 

项目 ： FlickAndBounce | 文件： MainPage.xaml.es (>V©) 
public sealed partial class MainPage : Page 



void OnEllipseManipulationStarted(object sender. ManipulationstartedRoutedEventArgs args) 



args.TranslationBehavior.DesiredDeceleration = maxVelocity / (1000 


在 ManipulationlnertiaStarting 处现程序的结 M , 通过水平和垂直速度绝对值的 S 大值 
来， 并稱？ Slider 值来计算以秒为中.位的减速。 

13.12 XYSlider 控件 

XYSlider 控件类似于一个泔杠，但可以通过改变十字位 K (或类 似东卩 在：维表血 J :. 
选择点。初-看， Pointer 事件可以用丁•该控件，直到你意识到该控件并想处理多个手指。 
如果使用 Manipulation 車件，就能避免这呰情况。 

我最初就是这么想的， 卜而 来试试看。 
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我从 ContentControl 派生出 XYSlider , 以便只需设 S Content 属性就 "I 以显示想作为背 
景的任何东西。而在此之上是用手指、鼠标或手写笔左右移动的 十字。 控件有一个属性、 
Point 类型的 Value 以及 ValueChanged 事件。 Point 属性的 X 和 Y 來标进行归一化处理，范 
围为0至1的内界相对值,这样会减轻定义类似于 RangeBase 或 Slider 的 IsDirectionReversed 
属性 Minimum 和 Maximum 值的控件负担。（实际 h ， 需 要一对 IsDirectionReversed 属性提 
供 X 轴和 Y 轴^ > 

控件定义木身为无模板，但模板中需要两个 部分： ContentControl 模板中正常 mJ •见的 
定制 ContentPresenter 以及视觉上类似丁 十字的东西。 通过 Canvas 丄 eft 和 Canvass.Top 附加 
属性的代码来移动十字，强烈表明模板需要在 Canvas 中定义十字。 

项 XYSliderDemo I 文件： XYSlider.cs 
namespace XYSliderDemo 
( 

public class XYSlider : ContentControl 

{ 

ContentPresenter ContentPresenter; 

FrameworkElement crossHairPart; 


static readonly DependencyProperty valueProperty = 

DependencyProperty.Register("Value", 

typeof(Point), typeof(XYSlider), 

new PropertyMetadata<new Point(0.5, 0.5), OnValueChanged)); 
public event EvenCHandler<Point> ValueChanged; 
public XYSlider() 

I 

this.DefaultStyleKey = typeof(XYSlider); 

) 

public static DependencyProperty ValueProperty 
get ( return valueProperty; } 

) 

public Point Value 

{ 

set { SetValue(ValueProperty, value); } 

get I return (Point)GetValue(ValueProperty ); J 


protected override void OnApplyTemplate() 

{ 

// Detach event handlers 
if (ContentPresenter != null) 

I 

ContentPresenter .ManipulationStarted -= OnContentPresenterManipulat ionStarted; 
ContentPresenter.ManipulationDelta -= OnContentPresenterManipulationDelta; 
ContentPresenter.SizeChanged -= OnContentPresenterSizeChanged; 

) 

// Get new parts 

crossHairPart = GetTemplateChild("CrossHairPart") as FrameworkElement; 
ContentPresenter = GetTemplateChild ("ContentPresenterPart") as ContentPresenter; 


// Attach event handlers 
if (ContentPresenter !二 null) 


ContentPresenter.ManipulationMode 
ManipulationModes.TranslateY; 
ContentPresenter .ManipulationStarted += 


ManipulationModes.1 
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contentPresenter.ManipulationDelta += OnContentPresenterManipulationDelta; 
contentPresenter.SizeChanged += OnContentPresenterSizeChanged; 

J 

// Make cross-hair transparent to touch 
if (crossHairPart != null) 

t 

crossHairPart.IsHitTestVisible = false; 


base.OnApplyTemplate(); 


void OnContentPresenterManipulationStarted(object sender, 

ManipulationStartedRoutedEventArgs args) 

( 

RecalculateValue(args.Position); 


void OnContentPresenterManipulationDelta(object sender, 

ManipulationDeltaRoutedEventArgs args) 



void OnContentPresenterSizeChanged(object sender, SizeChangedEventArgs args) 


SetCrossHair(); 


void RecalculateValue(Point absolutePoint) 

( 

double x ; Ma th.Max <0,Math.Mind, absolutePoint. X / con tent Presen ter. ActualWidth)); 
double y = Math.Max(0,Math.Min(l, absolutePoint.Y / contentPresenter.ActualHeight)); 
this.Value = new Point(x, y); 


void SetCrossHair() 


if 


(contentPresenter != null && crossHairPart !■ null) 


Canvas.SetLeft 
Canvas.SetTop( 


(crossHairPart, this.Value.X * 
crossHairPart, this.Value.Y * 


contentPresenter.ActualWidth); 
contentPresenter.ActualHeight); 


static void OnValueChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

( 

(obj as XYSlider).SetCrossHair(); 

(obj as XYSlider).OnValueChanged((Point)args.NewValue); 


protected void OnValueChanged(Point value) 

( 

if (ValueChanged != null) 

ValueChanged(this, value); 


如果用编程方式设筲 Value 属性，则类必须通过相对坐标将 ContentPresenter 的宽度和 
高度相乘并把十字设 S 到正确位 S 。 这种情况发生在 SetCrossHair 方法中。 
ManipulationStarted 和 ManipulationDel：a 氕件处理程序是在 ContentPresenter 对象中进行设 
H 。 二者调用 RecalculateValue 方法，将 Value 属性的指针绝对平标转换为相对叱标。 










ManipulationStarted 和 ManipulationDelta 处现程序都引用 Position 事件参数屈性，之前 
没有提到过这个该属性。对丁•鼠标或手写笔， Position 属性就是与生成 Manipulation 事件(此 
时为 ContentPresenter ) 相关的鼠标指针位 S 或笔尖位 W 。 对于触碰， Position 属性是所有参 
勺操控的手指的平均位置。如果只需要一个手指的位置， Position 属性就可以提供方便的方 
式来处理多个手指。 

MainPage.xaml 文件实例化 XYSlider , 并且引用从美国 NASA N 站获得扁平地球地图。 
但 XAML 文件的大部分专门用于为 XYSlider (特别是十字)定义 模板。 请注意，我把 
ContentPresenter 和 Canvas 放入 Grid , 并为 Grid 分配 丫通常分配给 ContentPresenter 的一些 
属性。 也就是说， ContentPresenter 和 Canvas 的左 .1: 角对齐， ContentPresenter 平标和相对 
坐标系之间的转换就会容易一些。 

项目： XYSliderDemo | 文件 2: MainPage .xaml (片段 > 



<Page•Resources 〉 

<ControlTemplate x : Key="xySliderTemplate" TargetType="local:XYSlider"> 
〈Border BorderBrush="{TemplateBinding BorderBrush)" 

BorderThickness="(TemplateBinding BorderThickness)" 
Background="{TemplateBinding Background}"> 


<Grid Margin="(TemplateBinding Padding}" 

HorizontalAlignment=" {TemplateBinding HorizontalContentAlignment} 
VerticalAlignment="{TemplateBinding VerticalContentAlignment)"> 



<Path Name="CrossHairPart" 

Stroke="(TemplateBinding Foreground} 


S trokeThickness-*' 3" 
Fill="Transparent"> 



<GeometryGroup FillRule="Nonzero"> 

<EllipseGeometry RadiusX= M 48" RadiusY="48" /> 
<EllipseGeometry RadiusX=”6" RadiusY="6" /> 
<LineGeanetry StartPoint="-48 0" EndEtoint="-6 0" /> 
<LineGecmetry StartPoint= M 48 0" EndPoint="6 0" /> 
<LineGeanetry StartPoint="0 -48" EndPoint="0 -6" /> 
<LineGeanetry StartPoint="0 48" EndPoint="0 6" /> 



</ControlTemplate> 

<Style TargetType= M local:XYSlider"> 

〈Setter Property="Template" Value="(StaticResource xySliderTemplate}" /> 
</Style> 

</Page.Resources 〉 











在我为 Windows Phone 7 写的该控件早期版本时，十字使用了模板化 Thumb 。 该版本 
并不理想，因为需要用户把 Thumb 从当前位置到拖动新位而对新版本，我想通过简中 - 
触碰就足以让十字跳到新的位置。 

但我也不肯定是否能成功。正如前面提到的(你也会休验到)，仅仅触碰位置并不可以 
把 I •字拖拽到该点， W 为需要一鸣动作才能触发 ManipulationStarted 事件。 

起初，我认为用 PointerPressed 事件代科 ManipulationStarted 响应速度能够史快。然而， 
对 PointerRoutedEventArgs 对象茛接调用 GetCurrentPoint 站 然会禁 lh Manipulation 車件。 

Pointer i)t 件 S 理想的就是出现这种情况，如果多个手指要移动十字，就要平均处理这 
些手指。如果卜' -章有史好的 XYSlide 能用】'在基 r 位图的手绘程序中选择颜色，我觉得 
也很正常。 

13.13 中心缩放和旋转 

在第-次介绍 Manipulation 事件的缩放和旋转特性时，我提到过通过引用中心点来应 
用变换。但在许多情 况卜， 这一点很重要。触屏界面的满意程度在很大程度上取决于用户 
手指与屏幕对象之间的连接有多紧密。 

我在前面 使用过 Position 属性，而确定该属性的缩放和旋转耑要讲一点儿技巧。 
Position 属性是所有手指相对于被操控元素的位置平均值。 Position 属性不是缩放和旋转的 
中心，但可以用來推导出中心。 

CenteredTransforms 项 U 有一个 XAML 文件，文件引用的是我 M 站上的位图。 


项 R: CenteredTransforms | 义件： MainPage.xaml( 片段 ) 







<Image.RenderTrans form> 

<TransformGroup x:Name= ,, xformGroup"> 

<MatrixTransform x : Name*"matrixXform" /> 
<CompositeTransform x:Name=»"compositeXform" /> 


</Image. 
</Image> 
</Grid> 

</Page> 


nderTransfor 


请注意， RenderTransform 属性现在被设置为 TransformGroup ，它同时包含 
MatrixTransform 和 CompositeTransform 。 

该代码隐藏文件使轨道之外所有形式的 Manipulation 都可行。 


项月 ： CenteredTransfi 
public sealed partic 


forms I 文件： MainPage.xaml.es ( 片段） 
ial class MainPage : Page 


public MainPage() 


this.InitializeComponent(); 
image.ManipulationMode = ManipulationModes.All & 
'ManipulationModes.Tran 


^ManipulationModes.TranslateRailsX t 
-ManipulationModes.TranslateRailsY; 


// Make this the entire transform to date 
matrixXform.Matrix = xformGroup.Value; 

// Use that to transform the Position property 

Point center = matrixXform.TransformPoint(args.Position); 

// That becomes the center of the new incremental transform 
compositeXform.CenterX = center.X; 
compositeXform•CenterY = center.Y; 

// Set the other properties 

compositeXform.TranslateX = args.Delta.Translation.X; 
compositeXform.TranslateY = args.Delta.Translation.Y; 
compositeXform.ScaleX = args.Delta.Scale; 
compositeXform.ScaleY = args.Delta.Scale; 
ccMnpositeXfoxnn.Rotation = args. Delta .Rotation; 

base.OnManipulationDelta(args); 

) 

) 

OnManipulationDelta 覆写 XAML 文件中定义的 7 种变换对象。任何时候， 
TransformGroup 的 Value 厲性 （为 Matrix 值 ) 代表整个变换，是由 MatrixTransform 和 
CompositeTransform 对象所代表的变换的结果。 ManipulationDelta 处理程序首先把 Matrix 
值从 TransformGroup 设腎为 MatrixTransform, 也就是说， MatrixTransform 现在是到该点 
的粮个变换。把转换也应用到 Position M 性，然 C 成为 CompositeTransform 的 CenterX 和 
CenterY 属性。 Kf 以把从 ManipulationDelta 结构所得新值直接设置为 CompositeTransform 
的其他属性。 

这样能起作用吗？你肯定想试一下，因为仅靠 K 面的屏辂截图是看来的。 
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试着把一个手指固定在 W 面的一个角，同时拉对角或旋转，你会看到图片会随着手指 
运动，当然要指定同性缩放限制。 

为了让你更方便，我写了一个很小的类，称为 ManipulationManager, 该类会在 Q 己的 
私有变换集合中执行 II 算， 变换在构造函数中进行创建并保存在字段中。 

项 F!: ManipulationManagerDemo I 文件： ManipulationManager.cs 
using Windows.Foundation; 
using Windows.UI.Input; 
using Windows.UI.Xaml.Media; 

namespace ManipulationManagerDemo 

( 

public class ManipulationManager 


Trans formGroup xformGroup; 
MatrixTransform matrixXform; 



public ManipulationManager() 
i 

xformGroup = new TransformGroup(); 
matrixXform - new MatrixTransform(); 


xformGroup.Children.Add(matrixXform); 
compositeXform = new CompositeTransformO; 
xformGroup.Children.Add(composit 
this.Matrix = Matrix.Identity; 


public Matrix Matrix { private set; get;) 

public void AccumulateDelta(Point position, ManipulationDelta delta) 
{ 

matrixXform.Matrix = xformGroup.Value; 

Point center = matrixXform.TransformPoint(position); 
compositeXform.CenterX = center.X; 
compositeXform.CenterY = center.Y; 
compositeXform.TranslateX = delta.Translation.X; 
compositeXform.TranslateY = delta.Translation.Y; 
compositeXforin.ScaleX = delta .Scale; 
compositeX form.SealeY * delta.Scale; 
compositeXform.Rotation = delta.Rotation; 
this.Matrix = xformGroup.Value; 
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公共 AccumulateDelta 方法茛接接受 ManipulationDelta 值并 U • 算出 新的 Matrix 属性。 
这样允许必须以这种方式操控的元素只有单一变换。 

项目 Project: ManipulationManagerDemo I 文件： MainPage.xaml ( 片段 > 

<Page ... > 

<Grid Background^"{StaticResource ApplicationPageBackgroundThemeBrush}"> 


Name: "in 
Source=l 


charlespetzold.com/pw 6 /PetzoldJersey. jpg 


HorizontalAlignment="Left" 

VerticalAlignment="Top"> 

<Image.RenderTransform> 

<MatrixTransform x:Name="matrixXform" 
</Image.RenderTransform> 

</Image> 


</Page> 


代码隐藏文件创述 ManipulationManager 实例并用该实例为 Image 汁算新变换。 


项 Ms 
public 


10 I 文件： MainPage.> 
MainPage : Page 


ManipulationManager manipulationManager = new ManipulationManager(); 

public MainPage() 

( 

this.InitializeComponent O; 


ManipulationModes.All & 
-ManipulationModes.TranslateRailsX i 
-ManipulationModes.TranslateRailsY; 


protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs args) 

( 

manipulationManager.AccumulateDelta(args.Position, args.Delta); 
matrixXform.Matrix = manipulationManager.Matrix; 
base.OnManipulationDelta(args); 


如果屏 I: •- 有多个可操控的对象，则 'A : 要为每一个对象都创建 ManipulationManager 
实例。下一章 PhotoScatter 项目中 , 我将使用 ManipulationManager 变化,该项目在图片目 
录中 M 示图片 并且吋 以通过手指仔细杏看。 


13.14 单手指旋转 

M 然 ManipulationStarting 事件并不一定会通知实际要发生的操控，但它为程序提供了 
— 些方法来初始化操控，它们都涉及 ManipulationStarlingRoutedEventArgs 的属性。 

• Mode 属性是人们熟悉的枚举类喂 ManipulationModes , 可以设定成你需要处理的 

操控类型。但要记住，只有 Mode 将其 ManipulationMode 属性设置为除 
ManipulationModes.None 或 ManipulationModes.System 之外的属性时，才会得到 
ManipulationStarting 事件。 




• Container 属性在其他所有 Manipulation 件都为只读，但在 ManipulationStarting 
寧件中为 uj ■写。默认情况 K , Container 属性与 OriginalSource 属性相冋，但在之 
后的 堺件 中， Container 属性是和 Position 属性相对的元素》如果想 i.h Position 属 
性是对？ OriginalSource 以外的元素，则可以把 Container 属性设 S 为该元素。 

• Pivot 属性允许单指旋转，详见后文 W 论。 

假设桌子上有一张 照片。 （我指的是真的桌子 h 有一张真的照片。>用手指碰碰照片 
角，将照片拉向自己一方。照片还留在同一个方向吗？不一定会。如果轻轻碰照片，桌面 
和照片之间的飧擦力会让照片略有旋转，其他部分会留在你所拉那-•角的 JTilto 。 

用中-手旋转或得到类似效果，但你需要使用我刚刚描述的围绕中心旋转对象的 技巧。 
唞实 h , XAML 文件基本上和 CenteredTransforms 项目一样。 


项 H: SingleFingerRotate I 文件： MainPage.xaml < 片段〉 



Source="http: / /www.charlespeczold.com/pw6/PetzoldJersey.jpg" 


Stretch»"None" 
HorizontalAlignment="Left" 
Vertica1A1ignment="Top" 



<TransformGroup x:Name="xformGroup"> 

<MatrixTransform x : Name="matrixXform" /> 
<CompositeTransform x:Name="compositeXform" /> 
</TransformGroup> 

</Image.RenderTransform> 

</Image> 



</Page> 

代码隐藏文 件几乎 相同，同的是 OnManipulationStarting 覆写。 

项 R: SingleFingerRotate | 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
( 

public MainPage() 



image.ManipulationMode = ManipulationModes.All & 

-ManipulacionModes.TranslateRailsX & 
^ManipulationMcxies.TcanslateRailsY; 


protected override void OnManipulationStarting(ManipulationstartingRoutedEventArgs args) 


args.Pivot = new ManipulationPivot(new Point(image.ActualWidth / 2, 

image.ActualHeight / 2), 



// Make this the entire transform to date 
matrixXform.Matrix = xformGroup.Value; 


// Use that to transform the Position property 

Point center = matrixXform.TransformPoint(args.Position); 
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compositeXform.CenterX = center .X; 
compositeXform.CenterY = center.Y; 

II Set the other properties 

compositeXform.TranslateX = args.Delta.Translation.X; 
compositeXform.TranslateY = args.Delta.Translation.Y; 
compositeXform.SealeX = args.Delta.Scale; 
compositeXform.ScaleY ■ args.Delta.Scale; 
compositeXform.Rotation = args.Delta.Rotation; 



这里的关键是把 ManipulationStartingRoutedEventArgs 对象的 Pivot 属性设靑为 
ManipulationPivot 对象。该对象提供了以下两项内容： 

• 旋转中心，总是所操控对象的中心 

• 围绕中心的保护半径，此处设置为50像素 

如果没有第二项，手指会非常接近元素中心，而小小的移动就可以使元素转一大圈。 
这是你真正必须自己尝试的程序之一，感受一下单手旋转如何给拖动操作增加真实感。 
还记得第5章的 SliderSketch 程序吗？记得你的疑 问吗： “这些不应该是刻盘，而应该 
是滑块？”本章最后的 DialSketch 程序就使用结合了中.指旋转的 Dial 控件。 

为了比较容易定义 Dial 类，我决定 Dial 类应该派生自与 Slider 相似的 RangeBase 。 这 
样能赋 _ f ■■控 件所有 double 类型的 Minimum , Maximum 和 Value 属性以及 ValueChanged 車 
件。然而，控件中的 double 值是旋转角度，唯一启用的操控为旋转。 

项目 ： DialSketch | 文件： Dial.cs 

using System; 

using Windows.Foundation; 

using Windows.UI.Xaml.Controls.Primitives; 

using Windows.UI.Xaml.Input; 



public class Dial : RangeBase 


public Dial() 



protected override void OnManipulationDelta(Manipu1ationDeltaRoutedEventArgs args) 




就是这样！当然，还没有模板，也无法访问任何变换。只设置一个新的 Value 属性(导 


致 RangeBase 触发 ValueChanged 事件)，并预计在其他地方实现。 

其中两个 Dial 控件在 DialSketch 的 XAML 文件中进行实例化。 Resources 部分专门为 
这两个控件提供 Style , 包括 ControlTemplate 。 Dial 控件从视觉上让用户知道是在旋转，因 
此，模板使用非常短的破折号来模拟刻度虚线。 

注意对 Dial 设置的 Minimum 和 Maximum 值。这意味着可以在 最小位 S 和最大位置之 
间旋转 Dial 粮整10次。为了从 DialSketch 画布一边到另一边画一条线，需要转动转10次。 

項目 : DialSketch | 文件 : Main Page, xaml ( 片段） 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="local:Dial"> 

〈Setter Property="Minimum" Value="-1800 M /> 

<Setter Property-"Maximum" Value="1800 M /> 

〈Setter Property="RenderTransformOrigin" Value="0.5 0.5" /> 

<Setter Property="Width" Value-"144" /> 

<Setter Property-"Height" Value="144" /> 

〈Setter Property="Margin" Value="24" /> 

<Setter Property-"Template , '> 



<RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 
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Grid.Column="0" 

Maximum:"1800" 

ValueChanged="OnDialValueChanged"> 
〈 local:Dial.RenderTransform> 
<RotateTransform /> 

</local:Dial.RenderTransform> 

</local:Dial> 


<Button Content»"Clear" 

Grid.Row="l" 

Grid.Column="l" 
HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Click="OnClearButtonClick" /> 


<local:Dial x:Name="vertDial M 
Grid.Row="l" 

Grid.Column="2" 

Maximum:"1800" 

ValueChanged»"OnDialValueChanged"> 

<local:Dial.RenderTransform> 

<RotateTransform /> 

</local:Dial.RenderTransform> 

〈 /local:Dial 〉 

</Grid> 

</Page> 

注总，单个 Dial 控件®复出现了 Maximum 设在我使用的 Windows 8版本中 ， Style 
中的设定似乎并没有‘‘拿走”。还要注意，每个 Dial 控件都附加了 RotateTransform 。 

代码隐藏文件把 Polyline 初始化 为个中 心点。对丁 - Dial 产生的毎个 ValueChanged 事 
件.都要设 W . 控件中的 RotateTranform 并把新的 Point 添加到 Polyline 。 

项 FI: DialSketch I 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 

public MainPage() 



loaded += (sender, args)=> 


}； 


polyline.Points.Add(new Point(drawingGrid.ActualWidth / 2, 

drawingGrid.ActualHeight / 2)); 


void OnDialValueChanged(object sender, RangeBaseValueChangedEventArgs args) 
( 

Dial dial = sender as Dial; 

RotateTransform rotate = dial.RenderTransform as RotateTransforni; 
rotate.Angle = args.NewValue; 

double xFraction = (horzDial.Value - horzDial.Minimum) / 

(horzDial.Maximum - horzDial.Minimum); 

double yFraction = (vertDial.Value - vertDial.Minimum) / 

(vertDial.Maximum - vertDial.Minimum); 


double x = 


i.ActualWidth; 


double y = yFraction * drawingGrid.ActualHeight; 
polyline.Points.Add(new Point(x, y)); 


void OnClearButtonClick(object sender, RoutedEventArgs args) 






polyline.Points.Clear 0; 


当然，程序到现在还无法使用，但至少能打招呼了(见下图)。 






第 14 章位 图 

从本书开始，我们一直都在用位图来 M 示、_笔、拉伸、倾斜和旋转等。但本章将介 
绍位图的内在灵魂以及操作其像素位。本章中的每个程序几乎都使用 WriteableBitmap 类， 
WriteableBitmap 类派牛•自 ImageSource ， 因此可以用作 Image 和 ImageBrush 的源： 

Object 

DependencyObject 

ImageSource 

BitmapSource 

Bitmaplmage 

WriteableBitmap 

Writeablebitmap 从 Bitmapsource 继承 SetSource 方法，通过该方法 hJ ■以通过实施 
IRrandomAccessStream 的类来加载位图文件。 

Writeablebitmap 的不同之处在于其定义 PixelBuffer 属性，允许你访问像素位。可以操 
控现有图片的像素或从头开始创建完整图片。木章还会讨论基于像索数组读/写多种格式的 
图片文件(如 PNG 和 JPEG )。 

如果你熟悉 WriteableBitmap 的 Silverlight 版木，则 KT 能很失 M 地发现 Windows Runtime 
版木没有实现 Render 方法，而有了它，你可以在图片表面渲染任何 UIElement 。 这会大大 
限制 WriteableBitmap 的若干常见的。 

例如在第13章，你看到很多手绘程序通过 Line 、 Polyline 和 Path 元素来渲染指针输入， 
你可能注意到我没有给你提供如何保存绘画的方式。有一种非常合理的方式能保存绘画， 
即在位图中渣染 Line 、 Polyline 和 Path 元素， 然后 将位图保#为文件。但 WriteableBitmap 
中缺少 Render 方法，大大阻碍了这一过程。 

在本章中，我会向你展示如何用算法在位图 t 画线条。这样一来，我可以给出 
FingerPaim 程序(项 tl 名中无任何数字)，可以将作品存储为位图。在第15章中，我会向你 
展•如何使用 SurfacelmageSource , SurfacelmageSource 也派牛.自 ImageSource , 并且 Kf 以 
通过 C ++代码的 DirectX 绘图操作进行绘制。 

我不会在书中讨论第三方库的 API , 但如果你需要在位图上绘制复杂的图形， 
WriteableBitmapEx 非常有用， " J * 访问 http :// writeablebitmapex . codeplex.com 了解详情。 

14.1 像素位 

位图图片的行和列均为整数。对于任何一个派生自 BitmapSource 类的实例 . PixelHeight 
和 PixelWidth 属性都提供这些 尺寸。 

从概念上讲，像素位存储在一个大小等于 PixelHeight 和 PixelWidth 的.维数组中。在 
实际中，数组只有一个维度，但最大的问题是单个像袭本身的性质。这有时称为位图的“颜 



色格式 ” ，范围可以从每像素丨位(在只有黑和白的位图中)到每像素1字节(在灰度位图或 
一个256色的位 图中) 再到毎像素3或4字节(有或没有透明度的全彩色)，而对于更多颜色 
分辨率甚至更高。 

然而在处理 WriteableBitmap 的时候，己经建立统一颜色格式。在每个 WriteableBitmap 
中，每个像素都包含4个 字节。 闵此，位图中的像素阵列的总字节 数为： 

PixelHeight * PixelWidth * 4 

图片 从最上 面一行开始，每行从左 到右。 没有行填充。对于每个像素，字节顺序如下： 

Blue 、 Green » Red、Alpha 

Color 值的字节范围从 0 到255。 WriteableBitmap 颜色值根据 sRGB ( “标准 RGB ”） 进 
行假设， W 此会兼容 Windows Runtime 的 Color 值(除了稍后讨论的 Color . Transparent )。 

WriteableBitmap 中的像素为预乘 a 通道格式。我稍后简要讨论其含义。 

Blue . Green 、 Red 、 Alpha 的顺序似乎比我们通常如何指称这些颜色字节(以及它们在 
Color . FromArgb 方法中的顺序 V 落后，但如果你认为 WriteableBitmap 像素实际是一个32位 
无符号整数， （X 值存储在高字竹，而蓝色值存储在低字节，则更合理。操作系统安装在 Intel 
微处理器时，整数通常存储在位图的小字节序(最低字节优先知 

我们来创建 writeablebitmap 并用像素进行填充，以构建一个自定义图片。为了便于计 
算，假设 writeablebitmap 有256行和256 列。 左上角设置为黑色，右上角设置为蓝色，左 
下角 设置为 红色，而右下角设置为品红色，即蓝色和红色的组合。这是一种渐变形式，但 
不像 Windows Runtime 中 Kf 用的任何渐变。 

以下 XAML 文件的 Image 元素准备接受 ImageSource 派牛.类。 

项 CustomGradient | 文件： MainPage.xaml ( 片段 > 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Image Name="image" /> 

</Grid> 

无法实例化 XAML 中的 WriteableBitmap , 因为没有无参数构造函数。代码隐藏文件在 
Loaded 事件的处理程序中创建并建立 WriteableBitmap 。 如下完整文件中，还可以看到 Using 
指令。 WriteableBitmap 本身是在 Windows . UI . Xaml . Media . lmaging 命名空间中进行定义的。 

项 CustomGradient | 文件： MainPage.xaml.cs 

using System. 10; 

using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.UI.Xaml; 
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using (Stream pixelStream = bitmap.PixelBuffer.AsStreamO) 

{ 

await pixelStream.WriteAsync(pixels, 0 , pixels.Length); 

> 

bitmap.Invalidate(); 
image.Source = bitmap; 

) 

} 

} 

WriteableBitmap 构造函数需要像素的宽度和尚度。程序根据宽度和高度为像素分配字 
节 数组： 

byte[] pixels = new byte[4 * bitmap.PixelWidth * bitmap.PixelHeightJ; 

WriteableBitmap 的数组大小总是照此 It 算的。 

行和列循环到位图的每个像素。" I 以如 F 计算引用特定像素的像素数组 索引： 

int index = 4 * <y * bitmap.PixelWidth + x); 


每个像素吋以按照为蓝、绿、红、 a 的顺序进行设置。 

在这个特定的例子中，两个循环解决像素存储在数组中的顺序，因此，并不需要为毎 
个像索重新计算 index 。 index 坷以初始化为零并像卜 面这样递增： 



for (int y = 0; y < bitmap.PixelHeight; y++) 

for (int x = 0; x < bitmap.PixelWidth; x++) 
I 

pixels Iindex++ J = (byte)x; // Blue 



pixels [index— 】 - (byte) y; // Red 
pixels[index++J = 255; // Alpha 


这肯定比我以前用的方法快，但通用性一般差一点。也可以为 index 定义循环，然后 
计算 x 和 y 。 （大多数情况 K ) 重要的是能访问每个像素。 

在 byte 数组已满£?，像蒺必须传到 WriteableBitmap 。 第一次检査时该过程看似有点让 
人迷惑。 WriteableBitmap 所定义的 PixelBuffer M 性为 IBuffei •类艰，只定义了两个 属性： 
Capacity 和 Length 。 我在第7章讨论过， lBuffer 对象通常为在操作系统内维护的一个存储 
区域，用于引 ffl 计数，以便 " J ■以在不需要的时候删除掉。你需要把字节传到该缓冲区。 

幸运的是，有一个称为 AsStream 的扩展方法，它 uj •以把 I Buffer 作为 .NET Stream 对象 
来 处理： 

Stream pixelStream = bitmap.PixelBuffer.AsStreamO ； 

要使用该扩展方法，必须给 Runtime . interopservices . windowsruntime 命名空间包括 using 
指令。如果没有 using 指令 ， IntelliSense +会显示存在该方法。 
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然后可以使用 Stream 所定义的 IK 常 Write 方法来为 Stream 对象写入字节数组，或荞可 
以像我一样使用 WriteaSync 。 由丁•该位图不是很大， iWH . 调用只通过 API 来传输字节数组， 
Write 应该快到足以证明用户界而线程的工作。以“手动”处理 Stream 或让其 tl 动处理， 
也可以像我一样把 Stream 逻辑:放在 using 语句中： 

using (Stream pixelStream = bitmap.PixelBuffer.AsStream()) 

( 

await pixelStream.WriteAsync(pixels, 0, pixels.Length); 

I 

无论什么时候改变 WriteableBitmap 像蒺，都要习惯对位图调用 Invalidate ： 

bitmap. Invalidate () ; 

该调用会请求绘位图。在这 1 P . 的特定情况 K , 并没有做严格耍求.似在其他情况 K 该调 
用很重要。 

最后，不要忘记显示最终位图！该程序直接将其设宵为 XAML 文件中 Image 儿素的 
Source 厲性： 

image.Source = bitmap; 


效果如 卜图 所尔。 



如果把 Stream 对象和像桌数飢保持为位图进一步操作的字段(位图图片 吋能随 时间而 
变化)，则需要用 Seek 调用开始 WriteAsync . 以当前位背设 W : 冋到 起点： 

pixelStream.Seek(0, SeekOrigin.Begin); 

但也耍注意，还 nj •以只把部分 byte 数绀％入位图。例如，假设只修改对应像袭平标 ( xl , 
yl > 的像索，但小包括 ( x 2, y 2>。 首先找到对应两个带标的字竹索引： 

int indexl = 4 » (yl • bitmap.PixelWidth + xl); 
int index2 = A • <y2 • bitmap.PixelWidth + x2); 

然 P 表明你想把像#从 indexl 史新到 index 2： 
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pixelStream.Seek(indexl, SeekOrigin.Begin); 
pixelStream.Write(pixels, indexl, index2 - indexl); 
bitmap.Invalidate(); 

我们来试试另一个自定义 渐变。 以下程序我称为 CircularGradient , 其渐变基 Pltl 特定 
像系 hj 位图中心所形成的角度。（数学比你想象得容易。） 

XAML 文件用粗线定义 Ellipse , 并给 Stroke 属性定义 imageBrush 。 动11_彳绕其中心旋 
转 Ellipse 。 

项 FI: CircularGradient I 义件： MainPage.xamI ( 片段） 

<Page ... > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 

《Ellipse Width="576" 

Height-"576 M 
StrokeThickness="48" 

RenderTransformOrigin="0.5 0.5"> 

<E11ipse•Stroke> 

<ImageBrush x : Name="imageBrush" /> 

</Ellipse.Stroke 〉 

<E11ipse.RenderTransform> 

<RotateTransforni x : Name="rotate" /> 

</Ellipse.RenderTransform> 



</Grid> 


<Page.Triggers> 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 

<DoubleAnimation Storyboard.Tar ge tName= "rotate" 

Storyboard.TargetProperty="Angle" 
From="0" To-"360" Duration-="0:0:3" 
RepeatBehavior=* M Forever" /> 

</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers 〉 

</Page> 


代码隐藏文件中的 Loaded 处理程序类似 f- 以前的程序。 两 个循环通过位图的行和列迸 
行，每个像索具有一个相对于左上角的位 R ( x , y )。 位于中心的像素平标为 
(bitmap.PixelWidth/2, bitmap.PixelHeight/2). 从中. 个像# 减去中心，并除以位图的宽和卨， 
"f 以把像索肀标转换为 - 1/2和1/2之间的值， 然后可 以传递给 math.atan2 方法以淮确得到 
我们所需要的角度。 

项 R: CircularGradient I 文 • 件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
( 

public MainPage() 

{ 

this.InitializeComponent(); 

Loaded += OnMainPageLoaded; 



WriteableBitmap bitmap = new WriteableBitmap(256, 256}; 

byte[) pixels = new byte 1 4 • bitmap.PixelWidth * bitmap.PixelHeightJ; 

int index * 0 ; 

int centerX = bitmap.PixelWidth / 2; 

int centerY *> bitmap. PixelHeight / 2; 

for (int y = 0; y < bitmap.PixelHeight; y++) 






pixels[index++J =0; // Green 

pixels!index++J * (byte)(255 * (1 - fraction)); // Red 
pixels [ index++ ] *= 255; // Alpha 


using (Stream pixelStream = bitmap.PixelBuffer.AsStream()) 

( 

await pixelStream.WriteAsync(pixels, 0, pixels.Length ); 

\ 

bitmap.Invalidate(); 
imageBrush.ImageSource = bitmap; 


角度转换为 0 和 I 之间的分数来汁算渐变。位图肴起来像一个整体，用 r •把 ImageBrush 
设置为 Rectangle 的 Fill 属性，如 卜-图 所示。 


然而，如果把位图限制在圆圈内，并开始旋转，更有趣，就像是渐变木身在旋转(见 
F 图)。 




正如你所看到的 ， Windows Runtime 中的画笔一般拉伸到正在着色的元素 。 ImageBrush 
也会这么做，从某种意义而言，底层位图的大小并不重要。但当然也的确 ® 要。位图过小 
吋能没有必要的细节，过大则徙然浪费像#。 

14.2 透明度和预乘 Alpha 

如果要在视频敁示器 表而渲 染位图，位图的像索一般小会直接转移到视频显示器 表面。 
如果位图支持透明像索，则像素必须基丁 •其 a 设置来结合现有表面的颜色。如果 a 值为 
255( 不透明)，则位图像素可直接复制到表面。如果 a 值为 0( 透明)，则根本不需要复制。如 
果 a 值为128,其结果是使用位图像索的平均值和复制表面颜色进行渲染。 

以下公式是对中个像素的计算。实际上 A 、 R 、 G 和 B 的取值范围从0到255,但该简 
化公式假设己经将值标准化为0到1。下标表示对现有“表明”渲染部分透明的“位图” 
像素的‘‘结 果”： 

Rrrsull _ ( 1 _ ^hilmap ) • 尺 ，+ ^himap •hlmap 

^result _ (1 ^bilmap ^sur/ace ^bilmap hi limp 

Brtsull _ (1 _ 人紙"| ) •尺 + ^hiima/) 9 ^bitmap 

注意每一行的第二个乘法。第二个乘法只涉及位图像索本身的乘法，而不是表面。也 
就是说，如果像袭的 R 、 G 、 B 值己经乘以 A 值，则可以加快整个在表面渲染位图的 过程： 

K ,.„ =(■ - ) •尺咖 + 尺— 

= 0 - X 咖 + G — 

B — =0- A— > R ,^acr + 

这就是所谓的“预乘 alpha ” 。 

例如，假设一个非预乘 alpha 位图包含带有 ARGB 值的像素 (192, 40, 60, 255 )。 alpha 
值192表示75%的不透明度 (192 除以 255). 带预乘 alpha 的等效像素为 (192, 30, 45, 192)。 
红色、绿色和蓝色的值都乘了 75%。 

渲染 WriteableBitmap 的时候，操作系统会假设像素数据己经预乘 alpha 。 对于任何像 
蒺， R 、 G 和 B 的值都+能大于 A 值。如果大于，则没有东西会“放大”，你也得不到你 
想要的颜色和透明度级别。 

我们来看一些例子。在第10章中，我向你展示了如何翻转图像并带有淡出效果，使图 
片#起来像反射。然而，由丁 Windows Runtime 不支持不透明蒙板，我不得不用部分透明 
矩形进行覆盖，使反射图像有淡出效果。 

ReflectedAlphalmage 项 H 采取的是不同方法。 XAML 文件有两个 Image 元素，都占据 
两行 Grid 的相 M 顶部中.元。第•.个 Image 元索有 RenderTransformOrigin 和 ScaleTransform 
绕着其底部边缘进行翻转，但没有指定 位图： 

项 H: Ref lectedAlpha Image I 文件 ： Main Page, xaml ( 片段） 

〈Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Grid.RowDefinitions> 

<RowDefinition Height="*" /> 

<RowDefinition Height^"*" /> 

</Grid.RowDefinitions> 
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< Image Source="http://www.charlespetzold.com/pw6/PetzoldJersey.jpg" 
HorizontalAlignment="Center” /> 



<Image.RenderTransform> 

<ScaleTransform ScaleY»"-l" /> 

</Image.RenderTransform> 

</Image> 

</Grid> 

第一个 Image 元素引用的相同位图必须在代码隐藏文件中独立加战。（你可能想知道如 
果把对象设置第一个 Image 对象的 Source 属性，是否可能基于该对象而获得 
WriteableBitmap 。但该对象为 Bitm 叩 Source 类型，而且不能从 BitmapSource 创建 
WriteableBitmap 。） 如果不必修改已下载位图，构造函数中的代码就如 K 所示： 

Loaded += async (sender, args)=> 
t 

Uri uri = new Uri("http://www.charlespetzold.com/pw6/PetzoldJersey.jpg"); 

BandomAccessStreamReference streamRef = RandomAccessStreamReference.CreateFromUri (uri); 

IBandomAccessStreamWithContentType fileStream = await streamRef .C^jenReadAsync (); 

WriteableBitmap bitmap = new WriteableBitmap(1 , 1); 

bitmap.SetSource(fileStream); 

refleetedImage.Source » bitmap; 

)； 

由于 会牵涉到一些异步处理，因此有必要把该代码放到 Loaded 处理程序。请注意，如 
果数据来自 SetSource 方法，则可以用“未知”大小来创建 WriteableBitmap 。 读取 JPEG 流 
的时候 ， WriteableBitmap 吋 以计算出实际像素 尺十。 

然而，如果 FileStream 对象传递给 WriteableBitmap 的 SetSource 方法并且把 
WriteableBitmap 设 S 为 Image 元索的 Source 属性，则位图尚未下载。下战发生在 
WriteableBitmap 中。也就是说，你还不能开始修改像索，因为像素还没有到达！如果 
WriteableBitmap 能像 Bitmaplmage —样定义事件来表明 SetSource 何时完成加政位阁文件， 
就好了，但事实并非 如此。 Image 元素的 ImageOpened 事件也不为 WriteableBitmap 提供此 
信息。 

因此，我们接下来做的事情是在位图文件中加载并进行修改。下 ifn 的代码吋以通过本 
章稍后提到的其他类进行简化，但我们来看看如果没有那些类又该如何完成。过程如下 
所示。 

AJjR : ReflectedAlphaImage | 文件： MainPage.xaml.es < 片 段） 

public sealed partial class MainPage : Page 

{ 

public MainPage() 

i 

this.InitializeComponent(); 

Loaded += OnMainPageLoaded; 


Uri uri = new Uri("http : //， 
RanckxnAccessStreamReference 









// Put the pixels back in the bitmap 

pixelStream.Seek(0, SeekOrigin.Begin); 

await pixelStream.WriteAsync(pixels, 0, pixels.Length); 

} 

bitmap.Invalidate(); 

reflectedImage.Source = bitmap; 


Buffer 类 VA ； 要完伞限定名，包括 Windows . Storage.Streams 命名空间，因为 System 命名 
空间还包括一个名为 Buffer 的类。 

这:甩有个 II 标，即把 I Random AccessStream 类型的对象传递到 WriteableBitmap 的 
SetSource 方法。然而，这样做之后，我们需要立即处理结果位图的像素。除 非己经 充分读 
取文件，否则无法进行。 

这就是创述 Buffer 对象用子读取 FileStream 对象的即.巾，然厂 f 使用相同 Buffer 对象将 
内容写入 InMenioryRandomAccessStream 。 顾名思义 ， InMemoryRanclomAccessStream 类实 
现 IRandomAccessStream 接 U ,以便能传递到 WriteableBitmap 的 SetSource 方法。（但请注 
意，流位置必须先设肾为0» > 

注总，我们在处理两个非常不同的数据块。 FileStream 引用 PNG 文件，木例中为82 824 
个节的压缩图片 数据。 InMemory Random AccessStream 为相同数 ft ! 块。■口.流传递到 
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WriteableBitmap 的 SetSource 方法，即解码为行和列像素。 pixels 数组的大小为 512 000 个 
‘n pixelStream 对象会引用这些压缩像素。 pixelStream 对象竹先把像素读取到 pixels 数 
组，然后再写回到位图。 

两个调用之间是渐变不透明度的实际应用。如果 Windows Runtime 小支持 
WriteableBitmap 的像蒺来有预乘 alpha 格式，修改 Alpha 7 -节即可，预乘格式会要求颜色 
T 节也要相乘。效果如 K 图所示。 



如果你想狞符只调幣 Alpha 字节会怎么样，可以在内循环替换为以下 代码: 



(byte) 


pixels[index]) 


只有背摸为 n 色时，才能得到想要的透明度。如果背景为! s 色，就没有透明度 = ! 
看肴公式就知道。 

假设你想变_ -_K CircularGradient 项回，这样渐变从纯色到完全透明。 h 了以用变化耵的 
代码来设 咒四个 字铃： 


pixels(index++J = (byte)(fraction * 255); 
pixels[index++J =0; 



pixels[index++J = (byte)(fraction * 255); 


// Blue 
// Green 
// Red 
// Alpha 


蓝色成分和 alpha 成分会得到相同设胃。蓝色成分永远为 255, 没有预乘 Alpha 格式。 
效果如下图所水。 
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14.3 径向渐变画笔 


Windows Runtime 中有很多神秘失踪的东四 ， RadialGradientBrush 就是其中之一 ， 
RadialGradientBrush 一般用于给圆 着色， 从圆 I •.某点到圆周会有渐变。 RadialGradientBrush 
常用来把一个圆分成7维“球”，符起来好像靠近左上角的区域在反射光。 

我开始写 RadialGradientBrushSimulator 类的时候，想在 XAML 文件中让该类的 
GradientOrigin 属性成为动画。闽此，我创建了巾 FrameworkElement 派牛.的 
RadialGradientBrushSimulator , ili 然其木身并小•任何东两。通过从 FrameworkElement 
派屮而创建，我史 荇易在 XAML 中实例化该类。我还要考虑动咖和绑定，冈此把所有属性 
定义为依赖屈性。该类代码不只含依赖厲性的系统幵销。 

项 lh RadialGradientBrushDemo | 义件： RadialGradientBrushSimulator.cs { 片段） 
public class RadialGradientBrushSimulator : FrameworkElement 


static readonly DependencyProperty gradientOriginProper 
DependencyProperty.Register("GradientOrigin", 
typeof(Point), 

typeof(RadialGradientBrushSimulator), 
new PropercyMetadata(new Point(0.5, 0. 
static readonly DependencyProperty innerColorProperty = 
DependencyProperty.Register("InnerColor", 
typeof(Color), 

typeof(RadialGradientBrushSimulator), 

new PropercyMetadata(Colors.White, OnPropertyChanged)); 


OnPropertyChanged)); 


static readonly DependencyProperty outerColorProperty = 
DependencyProperty.Register("OuterColor", 
typeof(Color), 

typeof(RadialGradientBrushSimulator), 

new PropertyMetadaca(Colors.Black, OnPropertyChanged)); 


readonly DependencyProperty clipToEllipseProperty = 
DependencyProperty.Register("ClipToEllipse". 





typeof(bool), 

typeof(RadialGradientBrushSimulator), 
new PropertyMetadata(false, OnPropert 


>ncyProperty.RegisterCImageSource", 
typeof(ImageSource), 

typeof(RadialGradientBrushSimulator) • 
new PropertyMetadata(null)); 



public bool ClipToEllipse 
( 

set ( SetValue(ClipToEllipseProperty, value); } 
get { return (bool)GetValue(ClipToEllipseProperty); } 

public ImageSource ImageSource 
( 

private set { SetValue(ImageSourceProperty, value); } 
get ( return (ImageSource)GetValue(ImageSourceProperty); } 
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void OnSizeChanged(object sender, SizeChangedEventArgs args) 



(obj as RadialGradientBrushSimulator).RefreshBitmap(); 



在稍后展 ¥ 的 RefreshBitmap 方法中，该类使 ffl GradientOrigin , InnerColor、OuterColor 
和 ClipToEIlipse 属性(以及元素的 actualwidth 和 actualheight } 来创述 WriteableBitmap , 而该 
类通过 ImageSource 属性 WriteableBitmap . 从而允 I 午 XAML 文件中的另―•个元尜通过 
绑定 ImageBrush 的 ImageSource M 性进行用。 

然后，我发现生成径向渐变 W 笔图片的算法并不简中。从概念 上讲. 你是在处理椭 IMI , 
尽管你能用位图来为矩形或其他形状着色。椭圆边界的颜色为 OuterColoi •厲性。 Point 类嘲 
的 GradientOrigin 属性为相对坐标。例如，值 (0.5, 0.5) 把 GradientOrigin 设置为椭圆中心。 
GradientOrigin 中的颜色为 InnerColor 属件。 

对丁•位图中的任意点 (x,y), 算法需要找到一个内插闲子來讣算 innerColor 和 OuterColor 
之间的颜色。该内插因了•是从 GradientOrigin 通过点 ( X , y) 到椭圆周长的一条貞线。点 (X, 
y ) 划分直线的位置确定了插值因子的值。 

为获得最佳性能，我想避开 H 角学方面的知识。我的策略是找到椭圆圆周和 
GradientOrigin 到 ( x , y ) 线条的交点。这涉及对位图中的毎一点求解一个：次方程。 

以卜 _ 为 RefreshBitmap 方法。 

项 H: RadialGradiencBrushDemo ! 义件 ： RadialGradientBrushSimulator .cs ( )\^t) 

public class RadialGradientBrushSimulator : FrameworkElement 


WriteableBitmap bitmap; 
byte IJ pixels; 



this.ImageSource = null; 
bitmap ■= null; 
pixels = null; 



if (bitmap 


bitmap = new WriteableBitmap(<int)this.Actualwidth, (int)this.ActualHeighc); 
this.ImageSource = bitmap; 

pixels = new byte[4 * bitmap.PixelWidth * bitmap.PixelHeighc]; 
pixeIStream = bitmap.PixelBuffer.AsStream (); 


==null || (int)this.ActualWidth != bitmap.PixelWidth I I 
(int)this.ActualHeight != bitmap.PixelHeight) 
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为了能成为动画，像素数列以及用于将像索转移到位图的 Stream 对象都保存为字段。 
Rel ' reshBitmap 方法不要求从堆中分 0 t !， 除非 WriteableBitmap 需要重建，因为该元索的大 
小已更改。 










然而事实证明，即使采用相当小的尺寸，动_的表现也非常差。但如果要避免渐变本 

身的动画，一定能用该位图把着色对象变成 动画。 MainPage . xaml 文件实例化一个 

RadialGradientBrushSimulator 、 一个绑定到模拟器的 Ellipse 以及几个动画。 

项 RadialGradientBrushDemo I 义件： MainPage.xaml( 片段） 

<Page ... > 

<Grid Background='MStaticResource ApplicationPageBackgroundThemeBrush)"> 

<Canvas SizeChanged«"OnCanvasSizeChanged" 



<Grid Name="ballContainer" 



Height-"96"> 


<Ellipse Name="ellipse"> 

〈 Ellipse.Fill 〉 

<ImageBrush ImageSource="{Binding ElementName=brushSimulator, 

Path=ImageSource}" /> 

〈 /Ellipse.Fill> 

〈 /Ellipse 〉 


<local : RadialGradientBrushSimulator x:Name="brushSimulator M 



</Grid> 

</Canvas> 

</Grid> 

<Page.Triggers 〉 

<EventTrigger> 

<BeginStoryboard> 

<Storyboard> 


GradientOrigin-"0.3 0.3" /> 


<DoubleAnimation x : Name="leftAnima" 


Storyboard.TargetName="ballContainer" 
Storyboard.TargetProperty="(Canvas.Left) 
From-"0 M Duration-" 。： 0:2.51" 
AutoReverse»"True" 
RepeatBehavior="Forever" /> 

<DoubleAnimation x:Name="rightAnima" 

Storyboard.TargetName="ballContainer" 
Storyboard.TargetProperty="(Canvas.Top)" 
From="0" Duration= M 0:0:1.01 M 
AutoReverse="True" 


</Storyboard> 

</BeginStoryboard> 

</EventTrigger> 

</Page.Triggers> 

</Page> 


RepeatBehavior="Forever" /> 


注意我如何把 Ellipse 和 RadialGradientBrushSimulator 放到相同 96 像索正方形 Grid 
使两个元素都有相同尺寸，而且模拟器生成位图和用于着色的 Ellipse 具有相同 大小。 代码 
隐藏文件只对基 T Canvas 大小的动画调整 To 值。 

项 RadialGradientBrushDemo | 文件： MainPage.xaml.cs ( 片 段 } 
void OnCanvasSizeChanged(object sender, SizeChangedEventArgs args) 


II Canvas 
leftAnima 







14.4 加载及保存图片文件 

正如你所#到的，可以给 WriteableBitmap 的 SetSource 方法赋 f 引用 PNG 文件的流， 
方法 "J ■以优雅地解码压缩文件，并转换成行和列的数组。通过 Windows . Graphics.lmaging 
命名空间中的类吋以史了解该过程 。町以 加战位图文件作为像索数组，还吋以用另外一种 
方法，即把程序创述的 WriteableBitmap 像素位数组保 存为 常用图片格式文件。 

位图文件格式一般通过其常 用的压 缩类喂(包括没有类型>进行识别，当然还有独特的 
数据结构、头文件和用于存储数据的压缩 方法。 读取特定文件格式并转换成像桌数组的代 
码称为“解码器”。解码器允许把图片文件加载到应用。 Windows . Graphics.lmaging 命名空 
间中的 BitmapDecoder 类支持下表中的格式。 
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读表 


文件格式 

MIME 类型 

文件扩展名 

PNG 

image/png 

•png 

TIFF 

image/tifT 

.tiff 


image/tif 

•tif 

WMPhoto 

image/vnd .ms-photo 

.wdp 

•jxr 


BitmapDecoder 炎决定加 栽哪些 类型的文件，如果无法识别则引发异常。 

从像#比特数饥创建特定格式文件的代码称为“编码器”，在 Windows Runtime 中编 
码器力 BitmapEncoder 类。使 用编时 器和使 ffl 解码器有一点+同。解码器吋以决定要求加 
战什么文件类甩 . !编码器+会明 1'1 你的思想而确定要保存的文件格式。必须要告知编码 
器。 BitmapEneoder 类和 BitmapDecoder 类支持 HI 同格式 ， Windows Icon 文件除外。 

编码器和解时器冇时介称为“编码解码器”，能方便地表示“编码器/解码器 ”或“ 压 
缩器/解压缩器。” 

I •.表所示的 7 个文件格式通过伞球唯 ID(Guid 处喂的 对象)进行识别，这些 1D 在 
BitmapEneoder 和 BitmapDecoder 类中定义为静态属性，但不;要在程序中硬编码这些 ID 
或#说也小需要包括很多特定信息。 

ImageFilelO 程序要演示如何通过 FileOpenPicker 和 BitmapDecoder 把位图文件加载至 lj 
应用，如何通过 FileSavePicker 和 BitmapEneoder 从应用中选样文件格式并保存位图文件。 
在 两片 之间，还有几个应川乜 按钮用 f 90 度旋转 图片。本程序使 ffl 文件选择器来获取 
StorageFile 对象，因此在访问用户文件时不需要任何特别的许可。 

XAML 文件定义一个 Image 儿尜、-个用: P 敁术加载位图信息的 TextBlock 以及 
AppBar 。 

项 PI: ImageFilelO | 文件： MainPaige.xaml < 片段） 

<Page ... > 

<Grid Background*"Gray"> 

<Grid.RowDefinicions> 

<RowDefinition Helght="Auto" /> 

<RowDefinition Height®"*" /> 

</Grid.RowDefinitions> 



<Page.BottomAppBar> 

<AppBar IsOpen="True M > 

<Grid> 

<SJackPanel Orientation="Horizontal" 

HorizontalAlignment= n Left"> 

<Button Name= M rotateLeftButton" 





IsEnabled="False M 

Style="{StaticResource AppBarButtonStyle} 
Content="&#x21B6; M 



IsEnabled- M False" 


Style="{StaticResource AppBarButtonStyle}_ 
Content-"&#x21B7; M 

AutomationProperties.Name="Rotate Right" 
Click="OnRotateRightAppBarButtonClick" /> 



<StackPanel Orientation="Horizontal" 

HorizontalAlignment»"Right"> 

<Button Style="(StaticResource OpenFileAppBarButtonStyle} 
Click= M OnOpenAppBarButtonClick M /> 



IsEnabled="False" 

Style-"(StaticResource SaveLocalAppBarButtonStyle} 
AutomationProperties.Name="Save As" 
Click-"OnSaveAsAppBarButtonClick" /> 



</Grid> 

</AppBar> 

〈 /Page. BottomAppBar> 

</Page> 

请注意， AppBar 的 IsOpen 属性初始化为 true 。 加载文件之前程序不做任何事情。 
AppBar 中的所有其他按钮都已经被禁用。 

为了使程序比较简单，其中没有留存很多信息。程序从硬盘加载的任何位图只作为 
Image 元素的 Source 属性而留存。代码隐藏文件中定义的唯一字段只存储位图分辨率信息, 
然而，这并不重要。 

项目 ： ImageFilelO | 文件： MainPage.xarol.es ( 片 段 } 
public sealed partial class MainPage : Page 
{ 

double dpiX, dpiY; 


public MainPage() 



如果用户点击 AppBar 中的 Open 按钮，程序会创建 FileOpenPicker , 并初始化 M 示 
Pictures 文件夹中的文件。 

项 H: ImageFilelO | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
{ 

async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args) 

{ 

// Create FileOpenPicker 

FileOpenPicker picker = new FileOpenPicker(); 

picker.SuggestedStartLocation = PickerLocationld.PicturesLibrary; 

// Initialize with filename extensions 
IReadOnlyList<BitmapCodecInformation> codecInfos = 





BitmapDecoder.GetDecoderlnformationEnumerator(); 


foreach (BitmapCodecInformation codecInfo in codednfos) 

foreach (string extension in codecInfo.FileExtensions) 
picker.FileTypeFilter.Add(extension); 


StorageFile storageFile 


(storageFile 


picker.PickSingleFileAsync(>; 


静态 BitmapDecoder.GetDecoderInformationEnumerator 非常有用。它会返回 7 个 
BitmapCodeclnformation 对象的集合，与前几页表中的 7 种文件格式相对应。毎个对象都包 
含 MIME 类型的集合和文件扩展名的集合。（我用来获取表中所 显示的 信息。>文件扩展名 
可以直接进入 FileOpenPicker 对象， FileOpenPicker 显 • 带扩展名的所有文件。 

如果 PickSingleFileAsync 调用返回非空 StorageFile 对象， F —步则是从该文件创建一 
个 BitmapDecoder 。 

项 H: ImageFilelO | 义件： MainPage.xaml.cs ( 片 段） 


public 


partial 


OnOpenAppBarButtonelick(object 


RoutedEventArgs args) 


// Open the stream and create 
BitmapDecoder decoder ■ null; 


ait storageFile.C 


r.CreateAsync(stream); 


(Exception 


exception 


(exception != 


MessageDialog msgdlg = 

new MessageDialog("That particular image 
"The system reports 
await msgdlg.ShowAsync(); 


•e could not be loaded. " + 
error of: " + exception); 


如果指定的是非阁片文件或其他 + 能处理的东西， BitmapDecoder.CreateAsync 方法会 
报异常。 

你可能知道， GIF 文件吋以包含多张图片，这些图片按顺序播 放动卵 j 。 这些申.独的图 
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片称为“帧”，并由 Windows Runtime 支持。创建 BitmapDecoder 对象后，下一步一般是 
开始提取帧。然而，如果不想使用多帧 GIF 文件(如果你不想用，我也不会怪你)，则可以 
直接提取第一帧并目.调用。我在以下代码中就是这么做的。 

项 N: ImageFilelO | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args) 



first frame 

bitmapFrame = await decoder.GetFrameAsync(0) 


// Set information 
txtblk.Text = String.B 

storageFile 』 


.PixelWidth, bitmapFrame.PixelHeight, 
mat, 
ame.C 


rame. 

rame.BitmapPixelForraa 


s.DpiX, bitmapFra 


•DpiY )； 


Save the 


dpiX = bitmapFrame.DpiX; 
dpiY = bitmapFrame.DpiY; 


// Get the pixels 
PixelDataProvider dataProvider = 


await bitmapFrame.GetPixelDataAsync(BitmapPixelFormat.Bgra8, 
BitmapAlphaMode.Premultiplied, 
new BitmapTransform(), 


ExifOrientationMode. 
ColorManagementMode. 


RespectExifOrientation, 
ColorManageToSRgb); 


byte 【】 pixels = dataProvider.DetachPixelData(); 



该方法在奴 〖fri 顶部 TextBlock 显 4 第一帧信息并把分辨率设置保存为字段。 

BitmapFrame 的 BitmapPixelFormat 和 BitmapAlphaMode 属性包含有关像系•格式的屯:要 
信息。 BitmapPixelFormat 是 Rgbal6( 红、绿、蓝和 a 16 位值)、 Rgba8( 红、绿、蓝和 alpha8 
位值)或 Bgra8( 蓝、绿、红和 a 8 位值)中的枚举项， ® 后一个兼容与 WriteableBitmap 相关 
联的格 j ： l 来该文件的像素数据转换成这些格式之…。该 BitmapAlphaMode 厲性 uj ■以表 
明 Ignore, Straight 或 Premultiplied 。 

可以直接调用+带任何参数的 GetPixelDataAsync 方法来获取帧像素格式中的像索字 
V/ 数组。然而，如果想使用位图数据来创建 WriteableBitmap, 则应该调用 GetPixelDataAsync 
的较长版木，以指定兼容 WriteableBitmap 的格式。 

GetPixelDataAsync 获取 WriteableBitmap 支持的相 N 格式字节数绀，创建和 W 示位图的 
代码类似于你以前见过的代码。 

项 ImageFilelO | 文件： MainPage.xaml.cs 01 段 > 

public sealed partial class MainPage : Page 


async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args) 


第 14 章位图 


// Create WriteableBitmap and set the pixels 

WriteableBitinap bitmap = new WriteableBitmap((int)bitmapFrame.PixelWidth, 

(int)bitmapFrame.PixelHeight); 

using (Stream pixelStream = bitmap.PixelBuffer.AsStreamO) 

I 

await pixelStream.WriteAsync(pixels, 0, pixels.Length); 

I 

// Invalidate the WriteableBitinap and set as Image source 
bitmap.Invalidate(); 
image.Source e bitmap; 

J 

// Enable the other buttons 
saveAsButton.IsEnabled = true; 
rotateLeftButton.IsEnabled * true; 
rotateRightButton.IsEnabled = true? 



以 I - 就足对 Open 按钮的处理。总之 • FileOpenPicker 返问 StorageFile 对象，打开并 H . 
传递到 BitmapDecoder.CreateAsynco BitmapDecoder 对象把阁片显;^为 BitmapFrame 对象， 
[fff GetPixel Data Async // 法決取 Ifj j . 创让 WriteableBitmap 的•数组。 

以 F 是显示位图的程序，第 13 章使用过 F 图中的位图。 



应甩栏上的 Save As 按钮执行 OnSaveAsAppBarButtonClick 方法，后者要创建 
FileSavePicker 对象。 BitmapEncoder.GetEncoderlnfbrmationEnumerator 提供 BitmapEncoder 
类支持的文件格式的信息，但该信息和 FileOpenPicker 的 使用方 式有些不同。 

FileSavePicker 需要文件类型列表,同时带有每种类型的一个或多个文件扩展名。不幸 
的是， BitmapCodecInformation 对象的 FriendlyName 属性是-个7••符串，类似 “ jPEG 编码 
器”，因此，我用 String 的 Split 方法来提取第一个单词(例如 “ JPEG ” 并且与多个文件 
扩展名结合在一起。代码还构造了支持 MIME 类甩及其关联 GU 1 D 对象的字典。 
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项 R: ImageFilelO I 文件： MainPage.xaml .cs 《片 段） 
public sealed partial class MainPage : Page 


async void OnSaveAsAppBarButtonClick(object sender, RoutedEventArgs args) 

( 

FileSavePicker picker = new FileSavePicker(); 

picker.SuggesCedSCartLocation = PickerLocationld.PicturesLibrary; 
ft Get the encoder information 

Dictionary<string, Guid> imageTypes = new Dictionary<string, Guid>(); 
IReadOnlyList<BitmapCodecInformation> codeclnfos » 

BitmapEncoder.GetEncoderInformationEnumerator(); 

foreach (BitmapCodecInformation codeclnfo in codeclnfos) 

List<string> extensions = new List<string>(); 
foreach (string extension in codeclnfo.FileExtensions) 
extensions.Add(extension); 

string filetype = codeclnfo.FriendlyName.Split(' ') 10J; 
picker.FileTypeChoices.Add(filetype, extensions); 

foreach (string mimeType in codecInfo.MimeTypes) 
imageTypes.Add(mimeType, codeclnfo.Codecld); 


// Get a selected StorageFile 

StorageFile StorageFile = await picker.PickSaveFileAsync(); 

if (StorageFile null) 
return; 


如下图 所氺，如果 FileSavePicker 显示自身，用户 就吋以 从弹出框中选择文件类型。 



从 FileSavePicker 返冋的 StorageFile 对象有 ContentType 宁段，为 MIME 类型7•符串， 
并能识别用户在弹出框中选抒的文件类甩。程序可以使用 fd 己的？••典来获得4该类项关联 
的 GUID 对象。 










第 14 章位图 


567 


项 R: ImageFilelO I 文件： MainPage.xaral.cs ( 片 段） 
public sealed partial class MainPage : Page 


async void OnSaveAsAppBarButtonClick(object sender, RoutedEventArgs args> 


// Open the StorageFile 
using (IRandoroAccessStream fileScream 


ream fileScream = 

ait storageFile.OpenAsync(FileAccessMode.ReadWrite)) 


// Create an encoder 

Guid codecId = imageTypes[storageFile.ContentType]; 

BitmapEncoder encoder = await BitmapEnccxler.CreateAsync(codecld, fileStream); 

// Get the pixels from the existing WriteableBitmap 

WriteableBitmap bitmap = image.Source as WriteableBitmap; 

byte 11 pixels = new byte[4 * bitmap.PixelWidth * bitmap.PixelHeight]; 

using (Stream pixelStream = bitmap.PixelBuffer.AsStreamO) 

( * 
await pixelStream.ReadAsync(pixels, 0, pixels.Length); 


"Write those pixels to the first frame 

encoder.SetPixelDaca(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied, 
(uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight, 
dpiX, dpiY, pixels); 

await encoder.FlushAsync(); 


有了 GUID . 静态 BitmapEncoder.CreateAsync 方法会返回一个 BitmapEncoder 对象。 
该对象包含 SetPixelData 方法，可用丁•将7•节数组传输到新图片文件的第一帧。 Save As 操 
作究成。 

程序的 其余部 分支持90度旋转图片。此功能在 BitmapEncoder 类中实际就有。 
BitmapEncoder 类定义/一个 Transform M 性，以在保存图片的同时以90度的 if ? 鼠来缩 
放、翻转、战剪或旋转图片。但如果你想看到转换后的图像，必须 U 行实现逻辑。 

90度旋转图片涉及三种方法。 

项目 ： ImageFilelO | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
( 

void OnRotateLeftAppBarButtone1ick(object sender, RoutedEventArgs args) 

( 

Rotate((BitmapSource bitmap, int x, int y)=> 

{ 

return 4 * (bitmap.PixelWidth * x + (bitmap.PixelWidth - y - 1)); 

Hz- 


void OnRota teRightAppBarBu t tonC1ick(obj ec t sender, RoutedEventArgs args) 

{ 

Rotate((BitmapSource bitmap, int x, int y)=> 

return 4 * (bitmap.PixelWidth * (bitmap.PixelHeight - x - 1) + y); 

))； 
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// Get the source bitmap pixels 

WriteableBitmap srcBitmap = image.Source as WriteableBi 
byte[J srcPixels = new byte[4 • srcBitmap.PixelWidth * 



using (Stream pixelStream ^ srcBitmap.PixelBuffer.AsStreamO) 

l 

await pixelStream.ReadAsync(srcPixels, 0, srcPixels.Length); 


// Create a destination bitmap and pixels 
WriteableBitmap dstBitmap * 

new WriteableBitmap(srcBitmap•F 
byte[] dstPixels = new byte[4 * dstBitmap 

II Transfer the pixels 



for (int y = 0; y < dstBitmap.PixelHeight; y++) 

for (int x = 0; x < dstBitmap.PixelWidth; x++) 


int srcIndex = calculateSourcelndex(srcBitmap, x, y); 



// Move the pixels into the destination bitmap 

using (Stream pixelStream = dstBitmap.PixelBuffer.AsStream()) 

{ 

await pixelStream.WriteAsync(dstPixels, 0, dstPixels.Length); 

) 

dstBitmap.Invalidate(); 



double dpi = dpiX; 



dpiY = dpi; 


II Display the new bitmap 
image.Source = dstBitmap; 



两项 J : 作大部分是由同一个 Rotate 方法进行处理，只+过该方法有 个 参数，参数为 
一函数并袪于目标位图的 x 和 y 像疾位 S 來汁兑来源索引。如采对大文件尝试该方法，你 
会发现旋转需要几秒钟，强烈喑示小应该在用户界 l ( ti 线程执行此类程序。 

通过把嵌 Slbr 循环传递到 Task . Rmi 并等待返回，町以异步执行旋转。然而，姅步代 
码+能访问 WriteableBitmap 。 H 要先茯取位图的宽度和岛度，洱执行异步代码并新定义 
CalculateSourcelndex 来接受位图的宽度和命度，而不是位图。在此期叫，也应该禁用应 J+J 
栏按钮，以免完成之前受到仟何干扰。 


14.5 色调分离和单色化 

大多数阁片处理程序都能够对位图进彳 t 色调分离。颜色分辨率 " r 以降 低到介 限调色 
板，图片看起来更像海报，而不是照片。另…个常见做法是 阁像转 换力中.色。这两项功能 
代表 M 简中.的图片处理操作。 








Posterizer 程序像 ImageFilelO 一样有 Open File 和 Save As 按钮，但页面还包含一 • 个“控 
制面板 ” （一连串 RadioButton 控 件 ) ， 可以选择大最颜色分辨率位 ( 独立于三个颜色通 道)， 
还有把图片转换为中 . 色的 CheckBoxo 

假设用户加载位图并点击 CheckBox 将其转换为单色，程序会综合每个像索的 Red 、 
Green 和 Blue 值变成灰色阴影。用户再取消选中 CheckBox 。 我们希樂你的程序保存有原始 
图片！这就是为什么 Posterizer 程序会维护两个完整像素数组的原因，一个为原始像素•(源 
像素，命名为 srcPixels), 另一个为修改后的像素 ( 目标像蒺，命名为 dstPixels )。 

XAML 文件包含控制面板、 Image 元索和应用栏。 

项 Posterizer | 文件： MainPage.xaml ( 片 段） 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="TextBlock ,, > 

<Setter Property="FontSize" Value="18" /> 

<Setter Property="TextAlignment" Value="Center" /> 

</Style> 

</Page.Resources> 

<Grid Background®"{StaticResource ApplicationPageBackgroundThemeBrushJ"> 

<Grid•ColumnDefinitions 〉 

<ColumnDefinition Width="Auto" /> 

<ColumnDefinition Width="*" /> 

</Grid.ColumnDefinitions 〉 


<Grid Name="controlPanelGrid" 
Grid.Column="0" 

Margin:"12 0" 

HorizontalAlignment="Center" 
VerticalAlignment= , ’Center "〉 



<ColumnDefinition Width="* M /> 
<ColumnDefinition Width:"*" /> 


<ColumnDefinition Width="*" /> 
<ColumnDefinition Width= M *" /> 
</Grid.ColumnDefinitions> 


<Grid.RowDefinitions> 

<RowDefinition Height="Auto" /> 
<RowDefinition Height s ="Auto , ' /> 
<RowDefinition Height="Auto M /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 


<TextBlock Text- M Red" Grid.Row-"0" Grid.Column="0" /> 
<TextBlock Text= M Green" Grid.Row="0" Grid.Column="l" /> 
〈TextBlock Text="Blue" Grid.Row="0 M Grid.Column="2" /；> 
<TextBlock Text= M All M Grid.Row="0" Grid.Column="3" /> 


<CheckBox Name="monochromeCheckBox" 

Content="Monochrome" 
Grid.Row="9 H 
Grid•Column:"0" 
Grid.ColumnSpan="4" 

Margin="0 12" 

HorizontalAlignment="Center" 

Checked= ,, OnCheckBoxChecked" 


</Grid> 


<Image Name="image" 

Grid • Column:" 1 •• /> 

</Grid> 

<Page.BottomAppBa r > 

<AppBar> 

<Grid> 

<StackPanel Orientation*.’Horizontal" 

HorizontalAlignment="Right"> 

<Button Style="{StaticResource OpenFileAppBarButtonStyle}" 
Click= H OnOpenAppBarButtonClick" /> 

<Button Name="saveAsButton" 

IsEnabled="False" 

Style="(StaticResource SaveLocalAppBarButtonStyle)" 
AutomationProperties.Name="Save As" 
Click="OnSaveAsAppBarButtonClick" /> 

</StackPanel> 

</Grid> 

</AppBar> 

</Page.BottomAppBar> 

</Page> 

然而， XAML 文件缺少实际的 RadioButton 控件。我决 定申独 控制三个颜色通道，但 
要有第四列能一键更改所有三个颜色通道。 Loaded 处理程序会创建按钮并用简便的 Tag 属 
性来进行识别。 

项 Posterizer | 文件 ： Main Page, xaml .cs ( 片段 } 
public sealed partial class MainPage : Page 


public MainPage() 

[ 

this.InitializeComponent(); 
Loaded += OnLoaded; 





文件1/0和 ImageFilelO 项目非常相似,只不过在加载图片时会创建像素的第二个数组, 
另外还有一个名为 UpdateBitmap 的方法(稍后介绍)负 w 通过该数组更新 WriteableBitmap 。 
在保存文件时，使用 dstPixels 数组。 

项月 ： Posterizer I 文件： MainPage.xaml.es(iiS) 
public sealed partial class MainPage : Page 
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ExifOrientationMode•BespectExifOrientation, 

ColorManagementMode.ColorManageToSRgb); 

srcPixels = dataProvider.DetachPixelData0; 

dstPixels * new byte[srcPixels.Length]; 

// Create WriteableBitmap and set as Image source 
bitmap = new WriteableBitmap((int)bitmapFrame.PixelWidth, 

(int)bitmapFrame.PixelHeight); 
pixelStream = bitmap.PixelBuffer.AsStream ㈠ ； 
image.Source » bitmap; 

// Update bitmap from masked pixels 
UpdateBitmap(); 


// Enable the Save As button 
saveAsButton.IsEnabled = true; 


async void OnSaveAsAppBarButtonClick(object sender, RoutedEventArgs args) 
{ 

FileSavePicker picker = new FileSavePicker(); 

picker.SuggestedStartLocation = PickerLocationld.PicturesLibrary; 


// Get the encoder information 

Dictionary<string, Guid> imageTypes = new Dictionary<string, Guid>(); 
IReadOnlyList<BitmapCodecInformation> codednfos 3 

BitmapEncoder.GetEncoderlnfomvationEnumerator() 


foreach (BitmapCodecInformation codeclnfo in codeclnfos) 

{ 

List<string> extensions * new List<string>(); 

foreach (string extension in codeclnfo.FileExtensions) 
extensions.Add(extension); 

string filetype * codeclnfo.FriendlyName.Split (’ ')[0]; 
picker.FileTypeChoices.Add(filetype, extensions); 

foreach (string mimeType in codecInfo.MimeTypes) 
imageTypes.Add(mimeType, codecInfo.Codecld); 


// Get a selected StorageFile 

StorageFile StorageFile = await picker.PickSaveFileAsync(); 


If (StorageFile == null) 
return; 


// Open the StorageFile 

using (IRandomAccessStream fileStream = 

await StorageFile.OpenAsync(FileAccessMode.ReadWrite)) 

( 

// Create an encoder 

Guid codecld = imageTypes[StorageFile.ContentType); 

BitmapEncoder encoder = await BitmapEncoder.CreateAsync(codecld, fileStream); 
// Write the destination pixels to the first frame 

encoder.SetPixelData (BitmapPixelFormat .Bgra8, BitmapAlphaMode. Premultiplied, 
(uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight, 

96, 96, dstPixels); 


await encoder.FlushAsync(); 









由丁 - 有第四列按钮，所以 RadioButton 事件处理程序变得比较复杂。我想点击第 M 列的 
RadioButton 的时候也检查其他三个按钮，但我肯定 + 想多次调用 UpdateBitmap 。 因此，我 
把二 . 个宇节掩码数列保持为字段并在 RadioButton 事件处理程序中进行设置。只有当至少有 
— 个掩码值被改变，才调用 UpdateBitmap 。 

项 R: Posterizer I 文件： MainPage.xaml .cs ( 片段 } 
public sealed partial class MainPage : Page 


// Byte masks for blue, green, red 
byte IJ masks = { OxFF, OxFF, OxFF }; 


void OnRadioButtonChecked(object sender, RoutedEventArgs args) 



if (needsUpdate) 

masks[masklndexj » mask; 


if (needsUpdate) 
UpdateBitmap(); 


void OnCheckBoxChecked(object sender, RoutedEventArgs args) 


UpdateBitmap(); 
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剩下的就是 UpdateBitmap 本身。飞个掩码值被应用到蓝、绿和红分量，如果选择 
Monochrome 按钮，则组合分鼂以创建灰度。灰度权 ® 为用 T NTSC 和 PAL 彩色电视标准 
的标准换算系数。 


项目 •• 


文件： MainPage. > 


5( 片段） 


void UpdateBitmap() 

( 

if (bitmap »■ null) 


for 

* 


source 
=(byte)• 

=(byte)(masks[I] 
byte R * (byte)(masks 【 2 】 
byte A = srcPixels[index 


byte 

byte 


s. Length; 


srcPixels[index 



// Possibly convert to gray shade 
if (monochromeCheckBox.IsChecked.Value) 
B = G = R = (byte)(0.30 * R + 0.59 

// Save destination pixels 
dstPixels[index + 0J = 
dstPixels[index + 1 J = 
dstPixelslindex +2 】 =R; 
dstPixelsIindex + 3J = A; 


// Update bitmap 
pixelStream.Seek(0, SeekOrigin. 
pixelStream. 
bitmap.Invalidate(); 


• Beg 
,ds 


tPixels.Length); 


如果要给该示例程序加点其他东西，我会考虑放到第：个线程中进行。 m 应该只放改 
变像柰位的循环到线程中。任何对 WriteableBitmap (=\ ^ 的修改都必须在用户界如线程进行。 

把图片的索分辨率减少到两位，效果如下图所示，也就是说，整张图只用了 64种颜 
色来! ui 示。 
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14.6 保存手绘作品 

前 Ifltm 仑的•系列 FingerPaint 程序 部有个 很大 缺点： 无法保存作品。我曾建议过一 
种保存图片的方法,即在 Grid 中枚举 Line 、 Polyline 或 Path 元素，并创建某种文本文件 
(可能为 XML 格式>， ® 新加载该文件时， 可以束 建所有元素。 

或者张位阁进行保存。然而，此时的大问题是 WriteableBitmap 的 Windows Runtime 
版本不支持渲染 Line 和 Path 等元素。堪本上必须实现你自己的直线和圆弧绘制算法。对 
f - 飢绘制线条的平标和其他参数.这些算法必须计算应该如何设1：位图中的像素才能渲 
染这些图形对象。 

假 设需要 在两点之间的_ 一条线。 



该几何线的宽度为芩，但经过渲染的线必须有非零宽度，而 H . 在手绘程序中，宽度可能相 
当大(例如24像 尜)。 我们真的想_一个矩形来渲染该线，矩形在该线两边延伸，为其一半 
宽度，本例中为每边12像素。 



旋转两个儿何点之间的标准化矢 S 90和 -90 度，并且乘以整个直线长度的一半，而得 
到矩形的四个炻。 

但如果要为毎个 PointerMoved 切件都画一个矩形，就不会正确通过曲线相连。会出现 
一些小小的缝隙。为了避免这些缝隙，要在矩形中 I 闻出圆角帽。 
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每个圆弧的半径为线长度的一半。 

整体形状包含用两条线连接的两段圆弧。（如果两点之间的宽度增加或减少，也会涉及 
到类似形状，上一章己经讲过但我们并不想画出我所画的轮廓。我们需要填充内部，也 
就是说，要对整个形状内的每个像素进行着色。 

高中时候可能你就熟悉斜率直线 方程： 

y = mx + b 

其中 w 为斜率 （ “ 上升” 6 为少在直线截取 y 轴的值。 

然而，在传统汁算机图形领域，可以基于水平扫描线填充区域，也称为“光栅线”（该 
术语来自电视技术)。直线方程把X作为><的 函数： 

x = ay + b 

对于从 ptl 到 pt2 的直线，可以通过下列公式计算出 a 和6: 

pnj(-pt\.x 

pt2.Y-pt\.Y 
b = pt\.X -a'pt\y 

对于任何〆即任何扫描 线)， 如果少是在 pTl.Y 和 P12.Y 之间，值就会对应于线上的 
一 个点。 可以从育线方程计算得到该点的； t 平标。 

看一肴 S 新的图并设想一 卜截 取图的水平扫描线。 对丁 -任意我们可以确定扫描线 
是否与外部两条线的一条或两条相交。如果是，则叮以计算出两个点的; r 值。所有 x 值之 
间的像索都必须着色。每个 _y 都可以如此《复。 

如果扫描线通过圆帽，着色过程就会有点乱。半径为 a •的圆以原点为中心，包括满足 
方程的所有点 (JT, >0: 

x 2 + y 2 = r 2 

如果圆以点为圆心，则方 程为： 

( x - x c ) 2 + ( y - y c ) 2 = i 2 

或者表示为 >> 的函数 

x = x c ±ylr 2 -(,y-y c ) 2 

对于任意少，如果表达式的平方根为负，则>>完全在圆之外，即在圆的 h 方或 F 方某处。 
否则，（一般来说)每个会有两个 x 值。唯一例外是平方枨为岑时，为来 自几的 r 中-位, 




在圆顶部和底部的点。 

处理部分闱绕圆的圆弧，更复杂一些。弧 h 任一点均为形成来自圆心的角度。该角度 
可以用 Math . Atan 2 方法来汁算。如果已知圆弧的起点和终点， Math . Atan 2 可以计算出对应 
两点的角度。 也吋 以使用 Math . Atan 2 来计算圆上任意点的角度。如果圆 h 的某点位亍起点 
和终点之间，则该点位于圆弧上。 

-般情况卜 _ ,对于任意我们都可以检査两条线和两个圆弧，并确定与四个图一致 
的所有点 ( x , y )。 大多数情况下只有两个这样 的点： 一个位于扫描线进入图形的位 H ， 另一 
个位丁-退出的位背。对于该扫描线，两点之间的所有像素都有进行填充。 

nngerPaint 解决方案包含库项 U ，名为 Petzold . Windows 8. Vector . 该项 tl 包含若干结 
构来实施在位图 I •.绘画线条。（我采用了结构，而没有用类，因为它们要实例化并被 频繁丢 
弃。） 

你 Ll 经看过包含在库中的 Vector 2 结构。所有其他结构都会实现它。 

Petzold.Windows8.VectorDrawing | 文 f 牛： IGeometrySegment.es 
using System.Collections.Generic; 



void GetAlIX(double y, IList<double> xCollection); 

) 

) 

对于任意 GetAHX 方法把条 U 添加到; c 值 集合。 在实际应用中，通过库中的结构来 
实现接口，该集合往往返回空值。有时包含一个条目，有时两个。 

以下为 LineSegment 结构。 
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请注意， GetAllX 中的 if 语句会检査少是否位于 poinUY 和 point 2. Y 之间。允许等于 
pointl . 的 汴值， 但不允许等于 point 2. Y 的沙值。换句话说，定义了直线来自 pointl ( 包含) 
的点，但不包括来自 point 2 的点。这有助于练习这方面的一些严格规则和注意事 项。 否则， 
如果处理连接线和圆弧，我们会在集合得到重复 x 值，工作更难做。 

这里没有特别考虚水平线，水平线是 pointl . Y 等于 point 2_ Y 且 cj 等于无穷大的直线。 
在这种情况 K , if 语句永远不会满足， H . 会忽略水 平线。 扫描线+会穿过水平边界线。 
ArcSegment 结构是圆周上的一段弧。 






TryY 中相当复杂(但对称)的 if 语句解释角度值的从 n 到 - Jt 再返回 。 angle 1及 angle 2 的 
角度比较表明角等于 anglel (而不是等 T angle 2) 的时候，扫描线和弧线相交。 











LineSegment 的 GetAllX 方法可以在集合放入零个或一个 x 值。 ArcSegment 的 GetAUX 
方法可以在集合放入零个、一个或两个 x 值。对于具有均匀线宽的线条 ， RoundCappedLine 
结构结合了两个 LineSegment 实例和两个 ArcSegment 实例。 

项目： Petzold.Windows8.VectorDrawing | 文件： RoundCappedLine.cs 
using System.Collections.Generic; 



LineSegment 1ineSegment1; 

ArcSegment arcSegmentl; 

LineSegment lineSegment2; 

ArcSegment arcSegment2; 

public RoundCappedLine(Point pointl, Point point2 / double radius) : this() 

Vector2 vector = new Vector2(point2 - new Vector2(pointl)); 

Vector2 normVect = vector; 
normVect « normVect.Norma1ized; 

Point ptla = pointl + radius * new Vector2(normVect.Y, -normVect.X); 
Point pt2a - ptla + vector; 

Point ptlb = pointl + radius * new Vector2(-normVect.Y, normVect.X); 
Point pt2b - ptlb + vector; 

1ineSegment1 = new LineSegment(ptla, pt2a); 
arcSegmentl = new ArcSegment(point2, radius, pt2a, pt2b); 

1ineSegment2 = new LineSegment(pt2b, ptlb); 
arcSeginent2 = new ArcSegment(pointl, radius, ptlb, ptla); 



该结构调用两个 LineSegment 实例和两个 ArcSegment 实例的 GetAllX 方法来实施 
GetAUX 。 确保粜合之前也被淸除，这是在该结构中调用 GetAllX 代码的责任。该方法返回 
有零个、一个或两个 x 值的集合。对 T •填充目的，可以忽略零个或一个； c 值的情况。而对 
于两个 x 值，可以填充两个值之间的像素。 

RoundCappedPath 结构也比较相似，只不过允许线条在压力感应触摸屏上开始和结束 
时可以有不同的宽度。 




LineSegment 1 ineSegment 1; 
ArcSegment arcSegmentl; 
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ArcSegment arcSegment2; 


public RoundCappedPath(Point point1, Point point2, double radius1, double radius2) 
: thisO 

{ 

Point cO = point1; 

Point cl » point2; 
double rO = radius1; 
double rl = radius2; 

// Get vector from cl to cO 

Vector2 vCenters = new Vector2(cO) - new Vector2(cl); 


// Get length and normalized version 
double d » vCenters.Length; 
vCenters = vCenters.Normalized; 

// Create focal point F extending from cO 
double e = d * rO / (rl - rO); 

Point F * cO + e * vCenters; 


// Find angle and length of right-triangle legs 
double alpha = 180 * Math.Asin(rO / e) / Math.PI; 
double legO * Math.Sqrt(e * e - rO * rO); 
double legl = Math.Sqrt((e + d> * (e + d) - rl * rl); 

// Vectors of tangent lines 

Vector2 vRight - -vCenters.Rotate(alpha); 

Vector2 vLeft = -vCenters.Rotate(-alpha); 

// Find tangent points 
Point tOR = F + legO * vRight; 

Point tOL ■ F + legO * vLeft; 

Point tlR = F + legl * vRight; 

Point tlL = F + legl * vLeft; 

lineSegmentl - new LineSegment(tlR, tOR); 
arcSegmentl = new ArcSegment(cO, rO, tOR, tOL); 
lineSegment2 - new LineSegment(tOL, tlL); 
arcSegment2 = new ArcSegment(cl , rl, tlL, tlR); 


public void GetAlIX(double y, IList<double> xCollection) 
{ 

arcSegmentl.GetAlIX(y, xCollection); 
lineSegmentl.GetAlIX(y, xCollection); 
arcSegment2.GetAlIX(y, xCollection); 
lineSegment2.GetAlIX(y, xCollection); 


我采用了前一章中 FingerPaint 5 程序的逻辑。 

在实际程序中使用这些结构并不像实例化 Line 、 Polyline 或 Path 那么简单！以下是 
FingerPaint 中的 RenderOnBitmap 方法。该方法利用 WriteableBitmap 位图 、 pixels 像索数组 
以及 pixelStream 的字符串对象。方法首先确定是该使用 RoundCappedLine 还是 


RoundCappedPath 。 

项 R: FingerPaint | 义件： MainPage.Pointer.cs ( 片 段 ) 
public sealed partial class MainPage : Page 


bool RenderOnBitmap(Point pointl, double radius 1, Point point2, double radius2, Color color) 



if (radiusl ■= ra« 
geoseg = new 


indCappedLine(center1, center2, radiusl); 


else if (radiusl < radius2 && radiusl + distance < radius2) 

















__ *»*« Ww 8 ■ 1> W •' ^ *T*^ *-♦ ' * f 8 


int yMin = 
int yMax = 






yMin 

yMax 


l.Max( 
i.Max( 


Math.M 
Math.Min(bi 


itmap.PixelHeight, 

itmac 


ap.PixelHeight, 


yMi 

yMa 


// Loop through all the y coordinates that contain part c 
for (int y = yMin; y < yMax; y++) 

( 

// Get the range of x coordinate^ in the segment 

xCollection.Clear(); 

geoseg.GetAlIX(y, xCollection); 
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// Update bitmap 
if (bitmapNeedslIpdate) 

( 

// Find the starting index and number of pixels 

int start = 4 * yMin * bitmap.PixelWidth; 

int count = 4 * (yMax - yMin) * bitmap.PixelWidth; 

pixelStream.Seek(start, SeekOrigin.Begin); 
pixelStream.Write(pixels, start, count); 
bitmap.Invalidate(); 

> 

return bitmapNeedslIpdate; 


Point ScaleToBitmap(Point pt) 

( 

return new Point((pt.X - imageOffset.X) / imageScale, 

(pt.Y - imageOffset.Y) / imageScale); 


请注意， renderonbitmap 在最后把更新限制为仅扫描受到特殊绘图操作影响的线条。 
ScaleToBitmap 方法会调整大于或小于当前豇面尺寸的位图的点。 

为了在功能模块中组织 FingerPaint 项 H 的源代码文件，我把 Mai 叩 age 的隐藏代码逻 
辑分为三个文件：正常的 MainPage . xaml . cs ; MainPage . Pointer . cs ， 包含所有 Pointer 事件处 
理(包括我刚刚展过的 RendeiOnBitmap 方 法)： MainPage . File . cs , 其中包含文件 I / O 操作。 
MainPage . Pointer . cs 的剩余部分应该比较熟悉。除了调 ffl RenderOnBitmap 之外，其他儿 T - 
和 FingerPaint 5 一样。 

项 FingerPaint | 文件： MainPage.Pointer.cs ( 片段 > 
public sealed partial class MainPage : Page 



public Brush Brush; 

public Point PreviousPoint; 

public double PreviousRadius; 


Dietionary<uint, PointerInfo> pointerDietionary = new Dictionary<uint, PointerInfo>(); 
List<double> xCollection = new List<double>(); 


protected override void OnPointerPressed(PointerRoutedEventArgs args) 

* 

// Get information from event arguments 
uint id = args.Pointer.Pointerld; 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 


// Create Pointerlnfo 



PreviousRadius = appSettings.Thickness ★ pointerPoint.Properties.Pressure, 
Brush ■ new SolidColorBrush(appSettings.Color) 


// Add to dictionary 
pointerDictionary.Add 


(id, pointerlnfo); 


// Capture the Pointer 
CapturePointer(args.Pointer); 



protected override 
( 

// Get ID from 

void 

eve 

OnPointerMoved(PointerRoutedEventArgs args 

nt arguments 

uint id » args 

.Poi 

nter.Pointerld; 





oreach 

// 


pointeruiccionaryiiaj; 

(PointerPoint pointerPoint in args.GetIntermediatePoints(this).Reverse()) 


For each point, get new position and pressure 
Point point = pointerPoint.Position; 
double radius - appSettings.Thickness * 


t. Properties.Pressure; 


// Render and flag that it's modified 
.IsImageModified = 

RenderOnBitmap(pointerInfo.PreviousPoint, pointerInfo.PreviousRadius, 
point, radius f 
appSettings.Color); 






OnPointerPressed 和 OnPointerMoved 都引用 AppSettings 类根称为 appSettings 的字段。 
程序暂 停时 . 该对象会把设置保存到本地存储并在程序启动时重新加载。该类的輅体结构 
在这一点上和前 血描 述的差不多。 






















Storyboard.TargetProperty="Visibility"> 


<DiscreteObjectKeyFrame 
</ObjectAnimationUsingKeyFr 


c!-- Disable file I/O 


Snapped 


<VisualStateManager.VisualStateGroups> 


<VisualStateGroup 
〈VisualState 
<VisualState 


Name="ApplicationViewStates"> 
Name="FullScreenLandscape" /> 
Name="Filled" /> 
Name="FullScreenPortrait" /> 


<Image Name="image" /> 


Background="{StaticResource ApplicationPageBackgroundThemeBrush)" 


nj •以用 FingerPaint 加载现有文件、绘画并保存。如果你正在做这些事情，那么文件名 
和整个文件路径都是用户设置的一部分。如果是从空白画布开始，则 LoadedFileNme Hi 
LoadedFilePath 属性都均为 null 。 不管怎样，如果图片己经修改，但没有保存到 1_1 命名文件, 
IsImageModified 属性就为 true 。 

遵循简洁应用概念， MainPage . xaml 文件直接实例化一个 Image 元素并实现应用栏。 




set { SetProperty<double> 



public void Save() 

{ 

/^>plicat. 
appData. 
appData. 
appData. 



Addill 
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<Button Style**"{StaticResource AppBarButtonStyle)" 
AutomationProperties.Name="Color" 
Content=*"&#xlF308;" 
Click= M OnColorAppBarButtonClick" /> 

<Button Style*"{StaticResource EditAppBarButtonStyle} 
AutomationProperties.Name="Thickness" 
Click= M OnThicknessAppBarButtonClick M /> 




Orientation»"Horizontal w 

HorizontalAlignment="Right"> 

<Button Style="{StaticResource OpenFileAppBarButtonStyle)" 
Click="OnOpenAppBarButtonClick" /> 

<Button Style="{StaticResource SaveLocalAppBarButtonStyle) 
AutomationProperties.Name".’Save As" 
Click="OnSaveAsAppBarButtonClick w /> 

〈Button Style="{StaticResource SaveAppBarButtonStyle}" 
Click= M OnSaveAppBarButtonClick" /> 


〈Button Style="{StaticResource AddAppBarButtonStyle)" 
Click»"OnAddAppBarButtonClick" /> 

</StackPanel> 

</Grid> 

</AppBar> 

</Page.BottomAppBar> 

</Page> 

注意 Visual State Manager 标记，如果应用在辅屏状态，该标记可以使应用栏中的所有 
文件 I / O 按钮消失。这实际上比避免重复按键更 重要： 在辅屏状态下，文件选取器是被禁 
用的。 

把该程序组合在一起的时候，我碰到一个小问题，涉及文件 I / O 以及终止时重新启动。 
假设用户启用 nieOpenPicker , 从照片库选择一个现有文件。程序会从 FileOpenPicker 获取 
StorageHle 对象，用于打开文件，并把 StorageFile 对象作为字段保留。如果用户按下应用 
栏中的 Save 按钮，程序会直接使用现有 StorageFile 对象来保存文件。 

然而，假设程序暂停、终止， C •来又重新启动。 StorageFile 对象不能保#在本地应用 
存储中！程序必须抛弃，通过保存文件的完整文件路径来弥补(正如我在 appSettings 类中所 
做过 的)。 程序再次启动，用户按下 Save 按钮，应用没有该文件的 StorageHle 对象。相反， 
必须使用静态 StorageFile . GetFileFromPathaSync 方法进行创建。但使用该方 法则总 味着程 
序会访问文件系统，而不使用从文件选取器所获取的 StorageHle 对象。 

为此， FingerPaint 程序需要有访问照片库的权限。在 Visual Studio 中，我显示 
Package.appxmanifest 的属性，选择 Capabilities 标签，并选中 Picture Library 。 我+想程序 




有这个特殊权限，但唯一的替代办法是强迫用户使用 FileSavePicker 来保存之前加载过的 
文件。 

以卜为 MainPage . File . cs 文件。从本章先前的程序以及第8章中 XamlCruncher 应用的 
逻辑，可以识别出询问用户保存已修改图片的位图加载和保存逻辑。 

项 H: FingerPaint I 文件： MainPage.File.cs 《片段 > 
public sealed partial class MainPage : Page 
{ 

WriteableBitmap bitmap; 

Stream pixelStream; 
byte IJ pixels; 

async Task CreateNewBitmapAndPixelArray() 


bitmap = new WriteableBitmap((int)this.ActualWidth, (int)this.ActualHeight); 



await InitializeBitmap(); 


appSettings.LoadedFilePath = null; 
appSettings.LoadedFilename = null; 
appSettings.IsImageModified = false; 


async Task LoadBitmapFromFile(StorageFile storageFile) 

( 

using (IRancfcjniAccessStrearrWithContentType stream = await storageFile. OpenReadAsync ()) 

{ 

BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream); 
BitmapFrame bitmapframe = await decoder.GetFrameAsync(0); 
PixelDataProvider dataProvider = 

await bitmapframe.GetPixelDataAsync(BitmapPixelFormat.Bgra8, 

BitmapAlphaMode.Premultiplied, 
new BitmapTransformO , 

Exi fOrientat ionMxie. RespectExif Orientation, 
ColorManagementMode.ColorManageToSRgb); 
pixels = dataProvider.DetachPixelData(); 

bitmap - new WriteableBitmap((int)bitmapframe.PixelWidth, 

(int)bitmapframe.PixelHeight); 

await InitializeBitmap (); 



pixelStream = bitmap.PixelBuffer.AsStreamO ； 



image.Source = bitmap; 
CalculatelmageScaleAndOffset(); 
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async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args) 

( 

Button button * sender as Button; 
button.IsEnabled - false; 

await ChecklfOkToTrashFile(LoadFileFromOpenPicker); 

button.IsEnabled = true; 
this.BottomAppBar.IsOpen = false; 


async Task ChecklfOkToTrashFile(Func<Task> commandAction) 

* 

if (SappSettings.IsImageModified) 

{ 

await commandAction(); 
return; 


string message = 

String.Format("Do you want to save changes to {0)?", 
appSettings.LoadedFilePath ?? "(untitled)"); 

MessageDialog msgdlg = new MessageDialog(message, "Finger Paint"); 
msgdlg.Commands.Add(new UlCommand("Save", null, "save")); 
msgdlg.Commands.Add(new UlCommand("Don't Save", mill, "dont")); 
msgdlg.Commands.Add(new UlCotrmand("Cancel M , null, "cancel")); 
msgdlg.DefaultCommandlndex = 0; 
msgdlg.CancelCommandlndex = 2; 

IUlCommand command = await msgdlg.ShowAsync(); 

If ((string)command.Id =» "cancel") 
return; 

if ((string)command.Id ■= "dont"> 

( 

await commandAction(); 
return; 


if (appSettings.LoadedFilePath = null) 



if (storageFile — null) 
return; 

appSettings.LoadedFilePath = storageFile.Path; 
appSettings.LoadedFilename = storageFile.Name; 

) 

string exception = null; 



await SaveBitmapToFile(appSettings.LoadedFilePath); 


catch (Exception exc) 

( 

exception ■ exc.Message; 


if (exception != null) 
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''■ 1 i ..»*■•■ '-t v'/ • .-.•It T 4 ^ -I t j.* 1 ! ' i I - 1 l_f _f L3 一 






foreach (string extension in codeclnfo.FileExtensions) 
extensions.Add(extension); 

string filetype = codeclnfo.FriendlyName.Split(' 'HO 】； 
picker.FileTypeChoices.Add(filetype, extensions); 

foreach (string mimeType in codecInfo.MimeTypes) 
imageTypes.Add(mimeType, codeclnfo.Codecld); 


// Get a selected StorageFile 

return await picker.PickSaveFileAsyncO; 


async Task<bool> SaveWithErrorNotification(string filename) 

• . 

StorageFile StorageFile = await StorageFile.GetFileFromPathAsync(filename); 
return await SaveWithErrorNotification(StorageFile); 






encoder • SetPixelData (BitmapPixelFormat. Bgra8, BitmapAlphaMode. Premultiplied, 
(uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight, 
96, 96, pixels); 
await encoder.FlushAsync(); 


接下来的 MainPage . xaml . cs 文件有几项责任。程序暂停时，文件代码会保存应 用设置 
并在程序启动时恢复应用设置。还会保存当前图片并重新加载。这种逻辑使用了 
MainPage . File . cs 文件中的方法，当然会忽略任何可能发生的异常。 

该文件还负责处理 SizeChanged 事件，可以在 XAML 文件中设置视觉状态，还可以设 
置 ImageScale 和 ImageOffset 字段。根据位图的原始大小、屏幕方向和辅屏状态，当前作 
为手绘 W 布的位图会大于或小于页面。画布总是最大化 M 示，且比例不失真，但触模哗标 
必须转换为绘_时的位图坐标。 

项 R: FingerPaint | 文件： MainPage.xaml.cs ( 片段 } 
public sealed partial class MainPage : Page 
( 

AppSettings appSettings = new AppSettings(); 
double imageScale * 1; 

Point imageOffset - new Point(); 

public MainPage() 



SizeChanged += OnMainPagesizeChanged; 

Loaded +■ OnMainPageLoaded; 

Application.Current.Suspending += OnApplicationSuspending; 


void OnMainPagesi2eChanged(object sender, SizeChangedEventArgs args) 


592 


Windows 程序设计 ( 第 6 版 ) 


VisualStateManager.GoToState(this, ApplicationView.Value.ToString() , true); 
If (bitmap != null) 



void CalculatelmageScaleAndOffset() 

{ 

imageScale = Math.Min(this.ActualWidth / bitmap.PixelWidth, 

this.ActualHeight / bitmap.PixelHeight); 

imageOffset = new Point((this.ActualWidth - imageScale * bitmap.PixelWidth) / 2 , 
(this.ActualHeight - imageScale * bitmap.PixelHeight) / 2); 


async void OnMainPageLoaded(object sender, RoutedEventArgs args) 

{ 

try 

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
StorageFile storageFile = await localFolder.GetFileAsync("FingerPaint.png"); 
await LoadBitmapFromFile(storageFile); 

) 

catch 


// Ignore any errors 


if (bitmap — null) 

await CreateNewBitmapAndPixelArray(); 


async void OnApplicationSuspending(object sender, SuspendingEventArgs args) 

{ 

// Save application settings 
appSettings.Save 0; 


// Save current bitmap 

SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral(); 
try 


StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
StorageFile storageFile = await localFolder.CreateFileAsync("FingerPaint.png", 



await SaveBitmapToFile(storageFile); 

) 

catch 

« 

// Ignore any errors 


deferral.Complete (); 



MainPage . aml.es 文件还负责用名力 ColorSettingDialog 和 ThicknessSettingDialog 的 

UserControl 派屮类來显示 Popup 对象并处理 Color 和 Thickness 应用栏按钮。 

项 FingerPaint | 文件： MainPage.xaml .cs 《片段 } 
public sealed partial class MainPage : Page 







this .BottomAppBar. Is(^>en = false; 

}； 


popup.IsOpen - true; 


ThicknessSettingDialog 是两者中较为简单的。它只包含带有一些直线粗细值的 ListBox 。 
我想发挥2的力最(比如2、4、8、16、 32), 但我也想要这些值之间的值，因此，值基本上 
以2的立方根增加，同时对冗余进行舍入和消除。 

項 R: FingerPaint I 文件： ThicknessSettingDialog.xaml (M*©) 

<Grid> 

<Border Background="White" 

BorderBrush»"Black" 

BorderThickness="3" 



<ListBox Selectedltem="{Binding Thickness, Mode=TwoWay}" 
Width="150”> 

<x:Double>2</x:Double> 

<x:Double>3</x:Double 〉 

<x:Double>4</x:Double> 

<x:Double>5</x:Double 〉 

<x:Double>6</x:Double> 














<Setter.Value> 

<ControlTemplate TargetType="ListBoxItem"> 



<VisualStateManager.VisualStateGroups> 

<VisualStateGroip x : Name="SelectionStates"> 
<VisualState x:Name="Unselected"> 


<Storyboard> 

<ObjectAnimationUsingKeyFrames 
Storyboard.TargetName-"border" 
Storyboard.TargetProperty="BorderBrush"> 
<DiscreteObjectKeyFrame 

KeyTime="0" 



</Storyboard> 


</VisualState> 


/> 


<VisualState x 
<VisualState x 


"SelectedUnfocused" /> 
"SelectedDisabled" /> 
SelectedPointerOver" /> 
"SelectedPressed" /> 


<VisualState x: Name: 

<VisualState x:Nairn 
</VisualStateGroup> 

</VisualStateManager.VisualStateGroups> 


<Border Name="border" 

BorderBrush="Black" 
BorderThickness-"1" 
Background =, ’Transparent" 
Padding**" 12 _•> 



</Border> 
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</Grid> 

</ControlTemplate> 
々 Setter • Value> 
</Setter> 



当然，所有“神奇”都发生在模板中。（代码隐喊文件中除了调用 InitializeComponent 
以外其他什么都没有}。 ItemTemplate 使用 ListBox 中的值作为实际线条宽度，而 
ItemConlainerStyle 的结果是围绕着所选值_出矩形(见卜'图)。 



MainPage 该对 ifitK 时， DataContext 设背为 appSettings 实例，因而会 通过 数据绑 
定来史新该类的 Thickness 属性值。 Thickness 诚性值用丁•所有后续绘画操作，直;到出现下 
一个变化。 


14.7 HSL 颜色选择 

/ I :本 I ?中，你可能匕经见过太多用滑块构建的颜色选择器，你可以选择 Red、Green 
和 Blue 值。这是选择颜色的简中.方法，因为这就是视频 K 小器和 Windows Runtime 定义颜 
色的方式。 

然而，这并+是选抒颜色的貞观方式。人们似乎史痒欢川色调 ( Hue )、 饱和度 ( Saturation ) 
和亮度 ( Lightness ) 值构建的系统。色调榷本 h 是彩! l ! [的•种颜色.艾萨*: •牛顿将其命名为 
红、橙、黄、绿、蓝、靛、紫的颜色。使用史‘‘计览机化”的颜色，色调范|詞从红色，通 
过黄色， 绿色. 青色，蓝色，品红冉返回到红色。注意三原色(红、绿、 蓝) 和三补色(黄、 
宵和品红)，三补色为 M 绕飞原色的配对纟 II 合。 

色调坷以 1 j 饱和度值相结合。如果饱和度为 ift 人值，则色彩最鲜艳。如果饱和度为 
小值.则颜色为灰色。此时亮度就会发挥作用。增加亮度会冲刷颜色，并最终用 ig 大值变 
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为 n 色。减少来自于媒介值的亮度会让颜色变黑。 

Hue - Saturation-Lightness (或 HSL ) 颜色选择用于 Windows Paint 和 Microsoft Word 中， 
有一个二维网格(类似于第13章中的 XYSlider ) 用色调与饱和度，而有一个常规滑块用 T 
色调。 

为了模拟这种颜色选择，我创建了一个 HSL 结构来表示 HSL 颜色值。该结构采用了 
RGB 和 HSL 之间的转换例程。 

项目 ： FingetPaint | 文件： HSL.cs 
public struct HSL 
{ 

public HSL(byte hue, byte saturation, byte lightness) : 

this (360 * hue / 255.0, saturation / 255.0, lightness / 255.0) 


// Hue from 0 to 360, saturation and lightness from 0 to 1 
public HSL(double hue, double saturation, double lightness) : this() 
{ 

this.Hue » hue; 

this.Saturation = saturation; 

this.Lightness = lightness; 

double chroma = saturation * (1 - Math.Abs(2 • lightness - 1)); 
double h - hue / 60; 

double x - chroma * (1 - Math.Abs(h % 2 - 1)); 

double r * 0 # g = 0 , b = 0 ; 

if (h < 1) 

{ 

r = chroma; 

g - x ； 

) 

else if (h < 2) 


g = chroma; 

else if (h < 3) 

{ 

g ■ chroma; 
b = x; 

) 

else if (h < 4) 
g = x ； 

b * chroma; 
else if (h < 5) 


b = chroma; 

) 

else 

{ 

r ■ chroma; 
b = x; 


double m - lightness - chroma / 2; 

this.Color * Color.FromArgb(255, (byte)(255 * (r + m)), 

(byte)(255 * (g + m)), 
(byte)(255 * <b + m))); 




public double Hue { private set; get; J 


public double Saturation { private set; get; } 
public double Lightness ( private set; get;) 
public Color Color { private set; get;) 

» 

注意两个不同的构造函数，一个使用 byte 参数，另一个采用 double 参数。对于对 HSL 
构造函数的特定调用， C # 编译器需要选择使用哪一个构造函数，只有所有参数都为 byte 
值时，选择第一个构造函数。第三个构造函数中没有这种歧义，第三个构造函数把 Color 
值转换为 HSL 。 

我在之前的章节展示了 XYSlider 控件，但我也表明如果使用 Pointer 事件而不是 
Manipulation 事件，控件会更加实用。以 卜为修 改后的 版本。 因为要处理 Pointer 事件，所 
以需要跟踪多个手指，但控件直接使用手 指位胥 的平均值来创建一个复合位 S 。 除此之外， 
控制基本上相同。 


项目 ： FingerPaint I 文件： XYSlider.cs ( 片 段） 
public class XYSlider : ContentConttol 
{ 

ContentPresenter contentPresenter; 

FrameworkElement crossHairPart; 

Dictionary<uint, Point> pointerDictionary = new Dictionary<uint, Point>(); 
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new PropertyMetadata(new Point() / OnValueChangedU; 
public event EventHandler<Point> ValueChanged; 
public XYSliderO 

l 

this.DefaultStyleKey = typeof(XYSlider); 

) 

public static DependencyProperty ValueProperty 

{ 

get ( return valueProperty; } 

) 

public Point Value 

set { SetValue(ValueProperty, value); } 

get { return (Point)GetValue(ValueProperty); } 












po: 

Rei 


args.Handled ■ true; 

l OnContentPresenterPointerReleased(object sender, PointerRoutedEventArgs args) 
uint id = args.Pointer.Pointerld; 
if (pointerDictionary.ContainsKey(id)) 

t 

pointerDictionary.Remove(id); 

RecalculateValue(); 
args.Handled = true; 

) 

l OnContentPresenterSizeChanged(object sender, SizeChangedEventArgs args) 




if (pointerDictionary.Values.Count > 0) 

{ 

Point accumPoint = new Point(); 

// Average all the current touch points 
foreach (Point point in pointerDictionary.Values) 
{ 

accumPoint.X +■ point.X; 
accumPoint.Y += point.Y; 

) 

accumPoint.X /= pointerDictionary.Values.Count; 
accumPoint.Y / = pointerDictionary.Values.Count; 



RecalculateValue(Point absolutePoint) 

double x = Math.Max(0, Math.Min(l, absolutePoint.X / contentPresenter.ActualWidth)); 
double y = Math.Max(0 # Math.Min(l, absolutePoint.Y / contentPresenter.ActualHeight ”； 
this.Value = new Point (x, y); 


1 SetCrossHair() 

if (contentPresenter != null && crossHairPart != null) 

{ 

Canvas.SetLeft(crossHairPart, this.Value.X * contentPresenter.ActualWidth); 
Canvas.SetTop(crossHairPart, this.Value.Y * contentPresenter.ActualHeight); 









if (ValueChanged != null) 



接下来建立 HsIColorSelector 控件。该控件派生自 UserControl 并在 XAML 文件中实例 
化 XYSlider、Slider 和 TextBlock。Resources 部分为 XYSlider 和 Slider 定义 ControlTemplate 
对象。通过我在第13章讲到的对应控件，会大大简化 XYSlider 模板，因为我清楚地知道 
想要怎样的视觉效果，不添加任何其他东西。 

项 Finger Paint I 文件 ： HsIColorSelector .xaml (片段 > 



<UserControl.Resources 〉 

<ControlTemplate x : Key="xySliderTemplate" TargetType* M local:XYSlider"> 
<Border> 

<Grid> 

<ContentPresenter Name="ContentPresenterPart" 

Content="{TemplateBinding Content J" /> 

<Canvas> 

<Path Name* M CrossHairPart w 

Fill="(TemplateBinding Foreground)" 

Data- M M 0 6 L -3 24 3 24 Z 

M 0 -6 L -3 -24 3 -24 Z 
M 6 0 L 24 -3 24 3 Z 
M -6 0 L -24 -2 -24 3 Z M /> 

</Canvas> 

</Grid> 

〈 /Border 〉 

</ControlTemplate> 


<ControlTemplate x : Key*"s1iderTemplate" TargetType= M Slider"> 
<Grid> 

〈Grid Name="HorizontalTemplate" 

Background®"Transparent" 

Height="48”> 

<Grid.ColumnDefinitions> 

<ColumnDefinition Width-"*" /> 

<ColumnDefinition Width="Auto" /> 

<ColumnDefinition Width="Auto” /> 

〈 /Grid.ColumnDefinitions 〉 


〈Rectangle Name="HorizontalTrackRect" 
Grid.Column= M 0 H 
Grid.ColumnSpan="3" 

Fill="lTemplateBinding Background) 
Height="12" 

VerticalAlignment- M Top" /> 


〈Thumb Name="HorizontalThumb" 

Grid•Column="1" 

DataContext="{TemplateBinding Value)"> 

<Thumb.Template 〉 

<ControlTemplate TargetType="Thumb"> 

<Path Fill 謙 "{TemplateBinding Foreground}" 
Data="M 0 24 L -3 48 3 48 Z" /> 

</ControITemp1ate> 

</Thumb.Template 〉 

</Thumb> 




第14章位图 
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<Grid Name="VerticalTemplate" 
Background="Transparent" 


Width= , M8 w > 



<RowDefinition Height*"*" /> 
<RowDefinition Height="Auto M /> 
<RowDefinition Height-"Auto" /> 
</Grid.RowE)efinitions> 


<Rectangle Name= M VerticalTrackRect" 
Grid.Row= M 0" 

Grid.RowSpan="3" 

Fill="(TemplateBinding Background) 
Width-"12" 

HorizontalAlignment="Left" /> 


<Thumb Name*"VerticalThumb" 

Grid.Row="l" 

DataContext="{TemplateBinding Value)"> 

<Thumb.Template> 

<ControlTemplate TargetType="Thumb"> 

<Path Fill="{TemplateBinding Foreground)" 
I 24 0 L 48 -3 48 3 Z" /> 


</Thumb.Template 〉 
</Thumb> 


<Rectangle Name="VerticalDecreaseRect" 

Grid.Row="2" 

Fill="Transparent" /> 

</Grid> 

</Grid> 

</ControlTemplate> 

</UserControl.Resources 〉 

<Grid> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto w /> 

〈RowDefinition Height •” Auto" /> 

<RowDefinition Height="Auto" /> 

〈 /Grid.RowDefinitions> 

<local : XYSlider x:Name= M xySlider" 

Grid.Row="0" 

Template®"{StaticResource xySliderTemplate)" 
ValueChanged="OnXYSliderValueChanged M > 

<Image Name="hsImage" 

Stretch="None" /> 

</local:XYSlider> 

<Slider Name-"slider" 

Grid.Row="l" 

Oi:ientation="Horizontal" 

Template="(StaticResource siiderTemplate}" 

Width-"256" 

Margin :"。 12" 

ValueChanged="OnSliderValueChanged"> 

<Slider.Background 〉 

<LinearGradientBrush StartPoint="0 0" EndPoint»"l 0"> 
<GradientStop Offset="0" Colors-Black" /> 

<GradientStop x:Name="sliderGradientStop" Offset="0.5" /> 
<GradientStop Offset="l" Color="White" /> 
</LinearGradientBrush> 

</Slider. Background 
</Slider> 

<TextBlock Name= M txtblk" 

Grid.Row="2" 
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</UserControl> 


请注意，用于 Slider 的 ControlTemplate 基本用其 Background 属性对控件进行着色。 
Background 属性在 XAML 文件结尾的 Slider 上进行 。 Background 为 LinearGradientBrush . 
范围从黑到 fl , 在代码隐藏文件中间进行设置颜色设置。该颜色基于用户从 XYSlidei ■所选 
择的色调与饱和度组合。 

代码隐藏文件定义丫 Color 类型的 DependencyProperty ， 名为 Color 。 很 U 然，作为用 
户绑定的公共属性， Color 属性比 HSL 类甩的公共属性史合埋。 Loaded 处理柷序负责为主 
色调-饱和度 M 格创建位图。它采用 HSL 结构(及平均亮度值)进行转化，以获得位图像素的 
RGB 值。 


项冃 ： Finger Paint I 文件 ： HslColorSelector .xaml .cs ( 片段） 
public partial class HslColorSelector : UserControl 
{ 

bool doNotSetSliders = false; 

static readonly DependencyProperty colorProperty = 
DependencyProperty.Register("Color", 
typeof(Color), 



public event EventHandler<Color> ColorChanged; 


public HslColorSelector() 

{ 

this.InitializeComponent(); 
Loaded *= OnLoaded; 






get { return colorProperty;) 

public Color Color 

l 

set 丨 SetValue(ColorProperty, value);) 

get i return (Color)GetValue(ColorProperty); > 


// Event handlers for sliders 

void OnXYSliderValueChanged(object sender, Point point) 

[ 

HSL hsl = new HSL(360 * point.X, 1 - point.Y, 0.5); 
siiderGradientStop.Color * hsl.Color; 
SetColorFromSliders <); 


void OnSliderValueChanged(object sender, RangeBaseVa1ueChangedEventArgs args) 



void SetColorFromSliders() 

( 

Point point = xySlider.Value; 
double value = slider.Value; 

HSL hsl = new HSL(360 * point.X, 1 - point.Y, value / 100); 



this.Color - hsl.Color; 
doNotSetSliders = false; 


// Color property-changed handlers 

static void OnCOlorChanged (DependencyCbject obj. DependencyPropertyChangecEventArgs args) 

( 

(obj as HslColorSelector).OnCplorChanged((Color)args.NewValue); 


protected void OnColorChanged(Color color) 

HSL hsl = new HSL(color); 

if (!doNotSetSliders) 

( 

xySlider.Value = new Point(hsl.Hue / 360, 1 - hsl.Saturation); 
slider.Value = 100 * hsl.Lightness; 


txtblk.Text = String.Format ("RGB = U0 }, ⑴， 

this.Color.R, this.Color.G, this.Color.B); 

if (ColorChanged != null) 

ColorChanged(this, color); 


如采从文件之外设置新的 Color 厲性， OnColorChanged 会进行响应，设冓 XYSlider 和 
Slider 值,还会用 TextBlock 来显示 RGB 颜色值。如果用户操作 XYSlider 和 Slider 值，则 
设1：新的 Color 属性并且调用 OnColorChanged 。 正常情况下，可以递归调用属性 Li 改变的 
处理程序，但在这种情况卜却不行，因为往返转换——从 RGB 到 HSL 冉到 RGB ——+会 
产牛完全相同的值。这就是为什么用户输入改变 Color 属件会有布尔字段 doNotSetSliders 
的原因。 

SilTi < CoIorSettingDialog 合并 HslColorSelector 。 




如果不是在分辨率非常卨的显小•器 h 使用 FingerPaint , 你•能会注意到 I :图比之前第 
13章的 FingerPaint 程序绘出来的要粗糙一点。有 •个 正当 理由： 如果用 Line 、 Polyline 和 
Path 渲染图形对象，就会得到反锯齿。边界线是填充颜色和背景颜色的组合，线条给人流 
畅的感觉。但在 Petzoid . Windows 8. VectorDrawing 库中没有实现抗锯芮。 像系吋 以着色，也 
可以不着色。 

14.8 反向绘画 

我曾经看过一部短片，冇个人用由色颜料和滚 简副一 幅大艰的彩色璀 w , 但片子是倒 
着放的，壁 M 好像奇迹般地用滚筒 ㈣ 在内色表面 h , 像创造出来一样。 











ReversePaint 程序阐述了类似技巧。 XAML 文件会访问我 网站上 的一张位图并定义位 
于顶部的另一个 Image 元索。 

项目： ReversePaint | 文件： MainPage.xaml ( 片段 > 

<Grid Background*"(StaticResource ApplicationPageBackgroundThemeBrush}"> 

<Image Source-"http://www.charlespetzold.com/pw6/PetzoldJersey.jpg" /> 

<Image Name="whiteImage" /> 

</Grid> 

第二个 Image 元素的位图在 Loaded 处理程序中创建，它与下载的位图大小相同，并目. 
全白。像 FingerPaint — 样，有 CalculatelmageScaleAndOffset 方法计算用于缩放指针输入该 
位图的因子。为了简化代码演示，我删除了很多指针事件处理程序的注释，但你之前看见 
过该逻辑。 OnPoimeMoved 方法有两个点、一个固定线宽以及一个表示透明度的 Color 值， 
用来调用简化形式的 RenderOnBitmap , 

项 ReversePaint | 文件： MainPage.xaml.cs (片段） 
public sealed partial class MainPage : Page 
[ 

Dictionary<uint, Point> pointerDictionary = new Dictionary<uint, Point>(); 
List<double> xCollection = new List<double>(); 


WriteableBitmap bitmap; 
byte IJ pixels; 

Stream pixelStream; 


Point imageOffset = new Point(); 
double imageScale = 1; 


public MainPage() 























// Find the minimum and maximum vertical coordinates 

int yMin = (int)Math.Min(centerl.Y - radius, center2.Y - radius); 

int yMax = (int)Math.Max(centerl.Y + radius, center2.Y + radius); 


yMin = Math.Max(0, Math.Min(bitmap.PixelHeight, yMin)); 
yMax - Math.Max(0, Math.Min(bitmap.PixelHeight, yMax)); 

// Loop through all the y coordinates that contain part of the segment 
for (int y ■ yMin; y < yMax; y++) 

{ 

// Get the range of x coordinates in the segment 
xCollection.Clear(); 
line.GetAUXty, xCollect ion); 


if (xCollection.Count == 2) 


// Find the minimum and max 
int xMin =» (int) (Math.Min(x 


horizontal coordinates 

ection[0】, xCollectiontl]) + 0.5f); 


int xMax = (int)(Math.Max(xCollection[0], xCollection[1]) + 0.5f); 

xMin = Math.Max(0, Math.Min(bitmap.PixelWidth, xMin)); 
xMax = Math.Max(0, Math.Min(bitmap.PixelWidth, xMax)); 

// Loop through the X values 
for (int x = xMin; x < xMax; x++) 


// Set the pixel 

int index = 4 * (y * bitmap.PixelWidth 
pixels Iindex + 0] = color.B; 
pixels[index + 1J = color.G; 
pixels Iindex + 2 J = color.R; 
pixels[index + 3 】 =color.A; 
bitmapNeedsUpdate = true; 


// Update bitmap 
if (bitmapNeedsUpdate) 

{ 

// Find the starting index and 
int start = 4 * yMin * bitmap, 
int count = 4 * (yMax - yMin) 


‘ number of pixels 
PixelWidth; 

* bitmap.PixelWidth; 


jixelStream.Seek(start. SeekOrigin.Begin) 
>ixeIStream.Write(pixels, start, count); 
bitmap.Invalidate(); 


Point ScaleToBitmap(Point pt) 

( 

return new Point((pt.X - imageOffset.X) / imageScale, 
(pt.Y - imageOffset.Y) / imageScale); 


该 RenderOnBitmap 方法比 FingerPaint 中的简单， 闵为只 需要处理恒定宽度，而且一 
致使用 RoundCappedLine 。 用几笔透明像素“喷涂”白色位图，效果如下图所术。 
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注意 ， PointerMoved 方法会如下调用 RenderOnBitmap 。 

RenderOnBitmap(previousPoint, point, 12, new Color()); 

Color 构造函数用设賢均为零的 A 、 R 、 G 和 B 属性来创建 ColortfL 该颜色有时也称 
为“透明黑”。如果要把颜色放入 WrileableBitmap ， 该 Color 构造函数比静态 Color.Transparent 
属性更好。 Colors . Transparent 返回 Color 值，其中 A 属性等于零，但 R 、 G 、 B 设背为 255。 
这种颜色有时也称为“透明门”，但+是预乘 - oc 透明色！你需要预乘 - a 颜色用于 
WriteableBitmap , 也就是说， R 、 G 和 B 的属性都不大亍 A 。 

14.9 访问照片库 

应用坷能莨接访问照片库并枚平所有子文件夹及文件夹中的文件。该程序珂以最高效 
地把文件以缩略图形式敁示在屏嵇上，以便此后冉访问实际位阁。 

PhotoScatter 程序演水 f 这种情况。程序在敁示照片库 H 录结构的豇 面左 侧构造 ListBox 
框。选择一个文件夹.程序以缩略图 M 示文件夹内容。可以用手指来移动、缩放和旋转图 
片，此时加载真正的文件，能用更高分辨率来放大图片。 

下图为是程序运行效果。我的 Screenshots 文件夾 H 前存储了 200多张图片，你4能会 
认出其中一些。 







. 我想让显尔在这里的每张图片都可以独立操作，而且能自己处理操作。为此，我创建 
/一个通用的 ContentControl 派4:类，名力 ManipulableContentControlo 该控件使用的是我 
在第13章提 出的 ManipulationManager 类的奇妙版。 

项 PhotoScatter I 义件： ManipulationManager. cs 
public class ManipulationManager 
( 

TransformGroup xformGroup; 

MatrixTransform matrixXform; 

CompositeTransform compositeXform; 

public ManipulationManager() : this(new CompositeTransformO) 


public ManipulationManager(CompositeTransform initialTransform) 

l 

xformGroup = new TransformGroup0; 
matrixXform = new MatrixTransform (); 
xformGroup.Children.Add(matrixXform); 
compositeXform = initialTransform; 
xfor mGroup.Children.Add(compositeXform); 
this.Matrix = xformGroup.Value; 

> 

public Matrix Matrix { private set; get;) 

public void AccumulateDelta(Point position, ManipulationDelta delta) 

{ 

matrixXform.Matrix = xformGroup.Value; 

Point center = matrixXform.TransfonnPoint(position); 
compositeXform.CenterX = center.X; 
compositeXform.CenterY = center.Y; 
compositeXform.TranslateX = delta.Translation.X; 
compositeXfornu Translated = delta.Translation.Y; 
comp>os iteXf orm. Sea leX = delta .Scale; 
compositeXform.SealeY = delta.Scale; 
con^>ositeXfonn.Rotation - delta.Rotation; 
this.Matrix = xformGroup.Value; 


m -的附加功能是一个构造函数，该函数允 I 午用该类内使用的 CompositeTransform 对 
象来初始化项0方位。 

为 了创述 ManipulableContentControl 类，我在 Visual Studio 中创建了 UserControl 类带 
的新项。在 XAML 文件和代码隐藏文件中，我把 UserControl 改变为 ContentControl 。 正常 
情况下，在 UserControl 派生类中， XAML 文件定义控件内容。而在该 XAML 文件中没有 
定义内容，但 RenderTransform 设背为 MatrixTransform . MatrixTransform 根据 
ManipulationManager 实例从代码隐藏文件进行设賈。 

项冃 ： PhotoScatter I 义件： ManipulableContentControl.xaml 



x : Class="PhotoScatter.ManipulableContentControl" 

xmlns="http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation" 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

xmlns : local="using: PhotoScatter > 

<ContentControl.RenderTransfonn> 

<MatrixTransform x : Name='*matrixXform" /> 



以下为代码隐藏文件。注意构造函数，用 CompositeTransform 来创建 
ManipulationManager 对象。 

项目 ： PhotoScatter | 文件 ： ManipulableContentControl • jcaml.cs ( 片 段） 
public sealed partial class ManipulableContentControl : ContentControl 



public ManipulableContentControl(CompositeTransform initialTransform) 



// Create the ManipulationManager and set MatrixTransform from it 
manipulationManager = new ManipulationManager(initialTransform); 
matrixXform.Matrix = manipulationManager.Matrix; 

this.ManipulationMode = ManipulationModes.All & 

-ManipulationModes.TranslateRailsX & 
'ManipulationModes.TranslateRailsY; 

protected override void OnManipulationStarting<ManipulationStartingRoutedEventArgs args) 

Canvas.SetZIndex(this, zIndex += 1); 
base.OnManipulationStarting(args); 

) 

protected override void OnManipulationDelta{ManipulationDe1taRoutedEventArgs args) 

manipulationManager.AccumulateDelta(args.Position, args.Delta); 
matrixXform.Matrix = manipulationManager.Matrix; 
base.OnManipulationDelta(args); 


还要注意，该类维护静态的递增 zlndex 属性，用 T 操作一开始就把被触碰允素 S f 
顶部。 

在正常情况下，使用 TreeView 或类似名称的控件来 M 示目录结构，该控件提供吋视化 
缩进和界血以展开和关闭树节点 。 Windows Runtime (还)没有 TreeView , 因此我决定使用朴 
索的老式 ListBox 。 不展开和关闭节点，但有缩进。 

ListBox 中的项 H 为 Folderltem 类耶。 

项 PhotoScatter I 文件： Folderltem.cs 
public class Folderltem 
{ 

public StorageFolder StorageFolder { set; get;) 

public int Level { set; get;) 

public string Indent 
{ 

get { return new string('\x00A0', this.Level * A );) 

) 

public Grid DisplayGrid ( set; get; } 

} 

毎个 Folderltem 对象代表一个文件夹。从 StorageFolder 对象获得文件夹名称，嵌套层 
级巾代码设置为 Level 属性， Indent 属性使用该值来为每个层级构建四个空格的字符串。 
Folderltem 还定义 Grid 类型的 DisplayGrid 厲性 。该 Grid 对象在用户第一次选择特定 



文件夹时进行设 S 并用 • 组对应 ; T •该文件夹中图片的 ManipulableContentControl 对象进行 
填充。如果用户反复浏览文件夹，保留该 Grid 以及其叽曲的所有内容，会避免程序柬新枚 
準每个文件夹内容。（然而，程序 + 安装文件查肴器，因此，如果有项 U 稍后添加到文件夹， 
程序就会不知道。） 

ListBox 的 ItemTemplate 在 MainPage.xaml 中进行定义，并且引用 Folderltem 中的属性。 


项目 ： PhotoScatter | 文件： MainPage. 
<Grid Background="IStaticResource 
<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width= 


UcationPageBackgroundThemeBrush)'' 


<ColumnDefinition Width: 
</Grid.ColumnDefinitions 〉 


<ListBox Name= M folderListBox M 
Grid. Column=" 0 •’ 

SelectionChanged="OnFolderListBoxSelectionChanged M > 
<ListBox.ItemTemplate> 

<DataTemplate> 

<ContentControl FontSize="24"> 

<StackPanel Orientation*"Horizontal"> 

<TextBlock Text='M Binding Indent/> 
<TextBloclc Text="&#xE188;" 

FontFamily= M Segoe UI Symbol" /> 
<TextBlock Text="{Binding StorageFolder.Name} 
</StackPanel> 



</DataTemplate> 
</ListBox.ItemTemplate> 
</ListBox> 




请注总用 ra 示小文件夹图标的 Segoe UI Symbol 字型中的 0xE188 代码点。以 Indent 
•?: 符串幵头， /T1 跟 Folderltem 中 StorageFolder 对象的 Name 属性。 

PhotoScatter 程序 /H Package.appxmanifest 的 Capabilities 部分要求有访问照片库的权限， 
W 为在 Loaded ，件期间，程序会递归调用 StorageFolder 的 GetFoldersAsync 方法，并同时 
为 ListBox 创建 Folderltem 对象，以获得完整录树。 

项 PhotoScatter I 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 


public MainPage() 

this.InitializeComponent(); 
Loaded += OnMainPageLoaded; 


void OnMainPageLoaded(object sender, RoutedEventArgs args) 

{ 

StorageFolder StorageFolder = KnovmFolders.PicturesLibrary; 
BuildFolderListBox(StorageFolder, 0); 
folderListBox.Selectedlndex = 0; 


async void BuildFolderListBox(StorageFolder parentStorageFolder, int level) 


Folderltem folderltem = new Folderltem 



StorageFolder = parentstorageFolder, 
Level = level 

)； 

folderListBox.Items.Add(folderItem); 


IReadOnlyList<StorageFolder> storageFolders = 

await parentStorageFolder.GetFoldersAsync(); 
foreach (StorageFolder StorageFolder in storageFolders) 
BuildFolderListBox(StorageFolder, level + 1); 



Loaded 处理程序最后把 ListBox 的 Selectedlndex 设置为 0, 并选择第一项，即图片文 
件夹本身。这样会触发调用 SelectionChanged 处理程序， SelectionChanged 使用 StorageFolder 
的 GetFilesAsync 方法来获取文件夹中的所有文件。但对于毎个 StorageFile，GetFilesAsync 
方法调用 GetThumbnailAsync 获取该文件的缩略图图片 。 ( 加 载缩略图比加战实际图片更好， 
后者可能需要相当长的时间，并消耗大領 : 内存。 ） 调用在 MainPage 中名为 LoadBitmapAsync 
的方法 ( 我会马上介绍 ) 创建 Image 元素和 ManipulableContentControl ， 用 - 示缩略图。 

项目 ： PhotoScatter | 文件： MainPage• xaml .cs ( 片 段 } 
public sealed partial class MainPage : Page 
( 

Random rand = new Random(); 

async void OnFolderListBoxSelectionChanged(object sender, SelectionChangedEventArgs args) 

{ 

FolderItem folderItem = (sender as ListBox)•Selected!tem as FolderItern; 

if (folderltem =» null) 

( 

displayBorder.Child = null; 
return; 

} 

if (folderltem.DisplayGrid != null) 
t 

displayBorder.Child = folderltem.DisplayGrid; 


Grid displayGrid « new Grid(); 



displayBorder.Child = displayGrid; 


StorageFolder StorageFolder = folderltem.StorageFolder; 

IReadOnlyList<StorageFile> storageFiles = await StorageFolder.GetFilesAsync(); 
foreach (StorageFile storageFile in storageFiles) 


nail = 

、 GetThumbnailAsync(ThumbnailMode.Singleltem); 
t LoadBitmapAsync(thumbnail); 










// Create an initial CompositeTransform for the item 
CompositeTransform xform = new CompositeTransform(); 

xform.TranslateX = (displayBorder.ActualWidth - bitmap.PixelWidth) / 2 ; 
xform.TranslateY * (displayBorder.ActualHeight - bitmap.PixelHeight) / 2; 
xform.TranslateX += 256 * (0.5 - rand.NextDouble()); 
xform.TranslateY += 256 * (0.5 - rand.NextDouble()); 

// Create the ManipulableContentControl for the Image 

ManipulableContentControl manipulableControl = new ManipulableContentControl (xform) 


manipulableControl.ManipulationStarted += OnManipulableControlManipulationStarted; 


displayGrid.Children.Add(manipulableControl); 


由于 GetThumbnailAsync 和 LoadBitmapAsync I ••的 await 操作符 ， BitmapSource 对象、 
Image 元桌和 ManipulableContentControl 实例会依次创建，并且创建一个敁七一个，从而提 
供了一场娱乐表演，就像图片逐渐堆积成一个有点儿随机的大堆。另一种选择是同时创建 
这些实例，但在大多数情况下，这样产生的线程多得会超出处理器的处理能力。 

ListBox 的 SelectionChanged 处理程序对每个文件夹只执行一次 。 ManipulableContentControl 
的 Tag 属性设 S 为与每项有关的 StorageFile 对象。后面用来加载实际位图 ( 如有必要)。还 
要注总，拇个 Image /t 素的 Tag 属性设 W •为 ImageType.Thumbnail 。 ImageType.Thumbnail 
为下列枚举项。 

项 R: PhotoScatter | 义件： ImageType.cs (片段 > 
public enum ImageType 
{ 

Thumbnail, 

Full, 

Transitioning 


用户一开始操作某一特定项 ， Tag M 性就会发牛 . 变 化。里然 ManipulableContentControl 
会处理 Manipulation 事件得允 I 午移动、缩放和旋转项 IJ, 但仍然要通过 SelectionChanged 
处理 . 程序附加 ManipulationStarted 事件的处理程序。该处理程序负责用实际位图替换缩 
略图。 


项 FJ: PhotoScatter | 文件： Main Page. xaml. 
public sealed partial class MainPage : I 


。3(片段> 

Page 


c void OnManipulableControlManipulationStarted(object sender, 

ManipulationStartedRoutedEventArgs args) 

ManipulableContentControl manipulableControl = sender as ManipulableContentControl; 
Image image = manipulableControl.Content as Image; 

If {(ImageType)image.Tag = ImageType.Thumbnail) 


// Set tag to transitioning 
image.Tag - ImageType.Transitioning; 
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StorageFile storageFile = manipulableControl.Tag as StorageFile; 
BitmapSource newBitmap = await LoadBitmapAsync(storageFile); 

// This is the case for a file that BitmapDecoder can't handle 
if (newBitmap !■ null) 

{ 

// Get the thumbnail from the Image element 
BitmapSource oldBitmap = image.Source as BitmapSource; 

II Find a ScaleTransform between old and new 



if (oldBitmap.PixelWidth > oldBitmap.PixelHeight) 

scale = (double)oldBitmap.PixelWidth / newBitmap.PixelWidth; 



scale 二 (double)oldBitmap.PixelHeight / newBitmap.PixelHeight; 


// Set properties on the Image element 
image.Source = newBitmap; 



ScaleX = scale, 
ScaleY = scale. 



用位图替换缩略图吋能是程序中最棘手的部分。 ManipulationStarted 处理程序包含异步 
调用，因此，如果用户同时操作多项，则珂能要处理多项的 ffi 叠事件。只有当 Image 的 Tag 
M 性为 ImageType.Thumbnail 时，主逻辑才会发牛 .-Tag 会设置为 ImageType . Transitioning (小 
是绝对必要，但有助于调 试)， 并调用 LoadBitm 叩 Async 获得该图片。如果终于替换了缩略 
图， Image 元素的 Tag 厲性会设 S 为 ImageType . Full 。 

我尽可能想让过程看起来很流畅，因此，常规任务计算实际位图转换成缩略 H 的缩放 
因子。毎项的尺寸和方位不改变，但分辨率有所提髙。 

•fid LoadBitmapAsync 的三个屯:战，柯个均返回 BitmapSource 。 有些不同的方法用 
来获得图片及其缩略图的 IRandomAccessStream 对象，然后常规任务用你看过的代码加戗 
文件。 

项 R: PhotoScatter | 文件： MainPage.xaml.cs 
public sealed partial class MainPage : Page 






// Open the StorageFile for reading 

using (IRandcfnAccessStreamWithContentType stream = await storageFile.CpenBeadAsync()) 

( 

bitmapSource = await LoadBitmapAsync(stream); 
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async Task<BitmapSource> LoadBicmapAsync(StorageltemThumbnail thumbnail) 



IRandomAccessStream); 


async Task<BitmapSource> LoadBitmapAsync(IRandomAccessStream stream) 

{ 

WriteableBitmap bitmap = null; 

// Create a BitinapDecoder from the stream 
BitmapDecoder decoder = null; 

try 

decoder = await BitmapDecoder.CreateAsync(stream); 





// Get Che pixels 



data 

tmapl 


Provider = 

;.GetPixelDataAsync(Bi tmapPixelFormat.Bgra8 r 
BiCmapAlphaMode.Premultiplied, 
new BitmapTransform (), 

ExifOrientationMode.RespectExifOrientation 
ColorManagementMode.ColorManageToSRgb); 


byte 【】 pixels = dataProvider.DetachPixelData(); 

// Create WriteableBitmap and set the pixels 

bitmap = new WriteableBitmap((int)bitraapFrame.PixelWidth, 

(int)bitmapFrame.PixelHeight); 

using (Stream pixelStream = bitmap.PixelBuffer.AsStreamO) 

( 

pixelStream.Write(pixels, 0, pixels.Length); 


cmap.Invalidate(); 
iturn bitmap; 


14.10 捕捉相机照片 

你 Li 经肴过 Windows Runtime 应用如何从头创連 WriteableBitmap 对象或从文件加载现 
有位图。程序获取位图还有一些其他方式。比如，在第17章中，你会看到程序如何直接或 
通过剪贴板从其他应用获取位图。 

应用也可以从电脑的内置摄像头获得位图。有两种方法，而且如果你愿意服从 Windows 
8的控制 ， Windows 8就可以显示其正常拍照界面，过程非常简单。 

为了使应用能使用电脑摄像头，必须在 Package . appxmanifest 文件中声明。在 Visual 
Studio 中打幵该文件，选择 Capabilities 标签，再笮击 Webcamo 

我给 EasyCameraCapture 程序做好了这些事情。以下为 MainPage . xaml 文件。 
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项目 ： EasyCameraCapture I 文件： MainPage.xaml ( 片段） 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Image Name*"image" /> 

〈Button Content="Capture Photo!" 

FontSize-"48 M 

HorizontalAlignmenC="Left" 

VerticalAlignment="Top" 

Click»"OnButtonClick" /> 

</Grid> 

Button 的 Click 处理程序实例化 Windows . Media.Capture 命名空间所定义的 
CameraCaptureUl 类，并调用 CaptureFileAsynco 

項月 ： EasyCameraCapture | 文件： MainPage.xaml.cs ( 片段） 

async void OnButtonClick(object sender, RoutedEventArgs args) 

( 

CameraCaptureUI cameraCap = new CameraCaptureUI(); 

StorageFile storageFile = await cameraCap.CaptureFileAsync (CameraCaptureUIMode.Photo); 


if (storageFile != null) 

{ 

IRandomAccessStreamWithContentType stream * await storageFile.OpenReadAsync(); 
Bitmap Image bitmap = new Bitmaplmage (); 
await bitmap.SetSourceAsync(stream); 
image.Source - bitmap; 


在调用 CaptureFileAsync 之前，程序 uf 以设 R CameraCaptureUI 的各种域性来选择文件 
格式、选抒像蒺尺寸、启用哉 剪等。 

应用调用 CaptureFileAsync 时， Windows 8会切换到非常像普通 Windows 8相机应用 
的界面。唯一重要的区别在丁-视频模式按钮被禁用（但可以 M 过把 
CameraCaptureU 1 Mode.PhotoOrVideo 传递到 CaptureFileAsync 方法而启用），而且左上角有 
一个圆形的左 箭头。 

如果要返回 EasyCameraCapture 应用，吋以按下该圆形左箭头，此时所返回的 
StorageFile 为 null . 或者轻击或点击屏幕，并按卜底部的圆形复选标记，这样就吋以拍摄 
照片啦。 

返回到程序， StorageFile 对象就会引用存储在应用本地存储的 TempState U 录中的文 
件。 EasyCameraCapture 代码会直接 M 示文件(见 卜' 图)。 






应用可能要启用 FileSavePicker ， 让用户保存图片或者自动保存到照片库中。或许应用 
会用拍摄到的图片做一些特定的事情，如果照片库中有特殊 H 录会很方便。（标准 Windows 
8相机应用会把照片存储到 Pictures 的 Camera Roll 目录。>为此，需要设 S 应用允许访问照 
片库， 就像常规 Windows 8相机应用一样。 

可以降低相机接口等级，编写自己的完整摄像头应用，包括视频预览、摄像头选择(如 
果有多个摄像头)、启动照片拍摄等。 

HarderCameraCapture 项目展示了基础 功能。 XAML 文件包含你以前没看过的东西(用 
' P 预览视频的 CaptureElement ) 以及一个老朋友。 

项 H: HarderCameraCapture I 文件： MainPage.xaml ( 片段 } 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<CaptureElement Name="captureElement" /> 

<Image Name="image" /> 

</Grid> 

代码隐藏文件使用 Loaded 处理程序来执行初始化。静态 Devicelnformation.FindAUAsync 
方法允许获取视频采集设备集合。 Devicelnformation 对象包含一个字符串 ID 和 
EnclosureLocation 属性， EnclosureLocation 属性让程序能确定 M •算机上每个摄像机的位 
置。代码试图找到正面摄像头，但如果找不到，就使用集合中的第一个(或可能是唯一一个) 
相机。 

项目 ： HarderCameraCapture | 文件： MainPage.xaml.cs ( 片 段） 

public sealed partial class MainPage : Page 

( 

MediaCapture mediaCapture = new MediaCapture(); 


public MainPage() 

{ 

this.InitializeComponent(); 
Loaded += OnMainPageLoaded; 



await new MessageDialog("No video capture devices found").ShowAsync(); 



if <devlnfo.EnclosureLocation != null && 


devlnfo. EnclosureliDcation • Panel = Windows. Devices. Enumeration. Panel. Front) 



// If not available, just pick the first one 



Create 
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MediaCapturelnitializationSettings settings : 
settings.VideoDeviceld = id; 
settings.StreamingCaptureMode 


i MediaCapturelnitializationSettings(); 


// Initialize the MediaCapture device 
await mediaCapture.InitializeAsync(settings); 


// Associate with the CaptureElement 
captureElement.Source - mediaCapture; 


// Start the preview 

await mediaCapture.StartPreviewAsync(); 



—旦获取到设备 ID ， Loaded 处理程序就会继续创建 MediaCapturelnitializationSettings 
对象并用来初始化定义为字段的 MediaCapture 对象。 MediaCapture 对象在 XAML 文件成为 
CaptureElement 实例化来源。 

Loaded 处理程序结束后，幵始预览工作。如果相机在计算机正 tfri ， 则应该出现 你臼己 
的实况视频。 

我还为拍照实现了 Tapped 处理程序 。 MediaCapture 类有 CapturePhotoToStorageFileAsync 
和 CapturePhotoToStreamAsync 两种方法。我选择了使用流方式，并拍摄照片到内存流。此 
时， BitmapDecoder 可以获取像#位。程序借用 FingerPaint 程序的 HSL 结构以增加所有像 
索的饱和度. 并创建 WriteableBitmap 。 

项目 ： HarderCameraCapture I 义件： MainPage.xaml.cs ( 片段 } 

public sealed partial class MainPage : Page 


bool ignoreTaps = false; 

async protected override void OnTapped(TappedRoutedEventArgs args) 

i 

if (ignoreTaps) 
return; 


// Capture photo to memory stream 

ImageEnccxiingProperties imageEncodingProps = InegeEncodingProperties.CreateJpeg(); 

InMemoryRandomAccessStrearn memoryStream = new InMemoryRandomAccessStreamO ; 
await mediaCapture.CapturePhotoToStreamAsync(imageEncodingProps, memoryStream); 

// Use BitmapDecoder to get pixels array 

BitmapDecoder decoder = await BitmapDecoder.CreateAsync(memoryStream); 
PixelDacaProvider pixelProvider = await decoder.GetPixelDataAsync(); 
byte[] pixels = pixelProvider.DetachPixelData(); 


// Saturate the colors 

for (int index = 0; index < pixels.Length; index += 4) 


Color color = Color.FromArgb(pixels[index + 3J, 

pixels[index +2 】， 
pixels[index + 1 】， 
pixels[index + 0]); 

HSL hsl = new HSL(color); 

hsl = new HSL(hsl.Hue, 1.0, hsl.Lightness); 

color = hsl.Color; 


pixels[index + 0] = color.B. 
pixels【index + 1 】 =color.G, 
pixels[index + 21 = color.R, 
pixels[index + 3】 ■ color.A, 





// Create a WriteableBitmap and initialize it 

WriteableBitmap bitmap = new WriteableBitmap((int)decoder.PixelWidth, 

(int)decoder.PixelHeight); 

Stream pixelStream = bitmap.PixelBuffer.AsStreamO; 
await pixelStream.WriteAsync(pixels, 0, pixels.Length); 
bitmap.Invalidate(); 

// Display the bitmap 
image.Source = bitmap; 

// Set a timer for the image 
DispatcherTiiner timer = new Dispatcher Timer 
1 

Interval = TimeSpan.FromSeconds(2.5) 

)； 

timer.Tick ♦= OnTimerTick; 
timer.Start(); 
ignoreTaps = true; 
base.OnTapped(args); 


void OnTimerTick(object sender, object args) 

( 

// Disable the timer 

DispatcherTimer timer * sender as DispatcherTiiner; 
timer.Stop(); 

timer.Tick -= OnTimerTick; 

// Get rid of the bitmap 
image.Source = null; 
ignoreTaps = false; 


我不想一直留着照片，因此，程序把 DispatcherTimer 设置为 20.5 秒。在此期 N 的触屏 
部会被忽略，但过了这段时间，就直接从屏幕 h 移除照片，我们又回到实况视频。 

当然，岛饱和度颜色•能有点吓人(见卜_ 图)。 




第 15 章原 生 

在 Windows 8编程中，并非所有语言都生而平等，这是一个悲惨的事实。从理论上讲， 
任何编程语言都⑴以访 M nJ ■用于 Windows Store 应用的任何类或功能，只不过整个 API 建 
立在组件对象模型 ( COM ) 之上。在理智编程的现实世界中，要想轻松访问 Windows 8 API 
的特定区域则取决于你正在使用的编程语言。 

例如，只有使用 C # 和 Visual Basic 托管语言的程序员才对以直接访问 Windows 8应用 
的 .NET API , 即以单同 System 为开头的命名空间。而对于同等功能， C ++ 程序员则要用 
Platform 命名空间中的 C ++ 运行库和类。 

另一方面 ， Windows 8应用吋以访问 Win 32 和 COM API 的子集，但这些函数和类只 
方便提供给 C ++ 程序员。要获#相同 API ， C # 程序员则需要费尽力气。 

本章讲解如何完成这些繁琐工作。我会讨论两种基本方法。第一种方法称为“平台调 
用”（也称为 Plnvoke 或 P / Invoke ), 平台调用从 . NET 编程幵始就存在，用来访问 Win 32 函 
数或其他动态链接库 ( DLL ) 函数。平台调用特别适合访问“扁平” API , 也就是说，其中一 
项功能是独立的(或者由其他函数提供的引用句柄)，而不是合并 成类。 

第二种方法涉及用 C ++ 写的“封装” DLL , 并从 C # 程序中访问该 DLL 。 这种方法更适 
合 llli 向对象的 API , 特别适合统称为 DirectX 的高性能图形和音频类。 

在 Windows 8应用中，用一•种语言写而供另一种语言访问的 DLL 必须为特殊格式，称 
为 Windows Runtime Component。Visual Studio k ] •以创建 Windows Runtime Component , 但 
这些库的功能有一堆规则和限制。 

请记住，+能使用这些方法来赋予程序访问 Windows Store 应用不允许的函数。+能 
使用这些方法来访问任意 Win 32 函数。仅限于 Windows 8应用允仵的子集的函数。也不能 
调用 DLL 中的函数， DLL 会调用不在该子集中的 Win 32 函数。 

15.1 P/Invoke 简介 

假设你正在浏览可用于新的 Windows 8应用的 Win 32 函数子集，看到了一个你想要的。 
在文档中其形式 如下： 

void WINAPI GetNativeSystemlnfo(_out LPSYSTEM_INFO lpSystemlnfo); 

如果你完全不熟悉 Win 32 API , 肯定觉得这鸣东 | Hj 无用。大写字母标识符一般是在各种 
Windows 头文件中通过 C # define 或 typedef 语句进行定义。在安装了 Visual Studio 的 i _| •算 
机 h ， 可以在 C:/Program Files ( x 86 y\Vindows Kits /8.0 LI 录的子 U 录屮找到这些头文件。 JS 
稱木的是 Windows . h 、 WinDef . h 、 WinBase.h 和 winnt . h。WINAPI 标识符和_51«^11 是相问 
的， _ stdcall 是 C 程序调用 Win 32 函数的标准调用约定 。 LPSYSTEM JNFO 在 SYSTEM JNFO 
结构中是 SYSTEMJNFO 的长指针，这里的“长”指的是比 Windows 刚刚出现时&16位 
指针要宽。 SYSTEMJNFO 结构定义如下： 
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typedef struct _SYSTEM_INFO { 
union [ 

DWORD dwOemld; 

Struct { 

WORD wProcessorArchitecture; 
WORD wReserved; 


): 


DWORD 

dwPageSize; 

LPVOID 

lpMinimumApplicationi 

LPVOID 

lpMaximumApplicationi 

DWORD PTR 

dwActiveProcessorMask; 

DWORD 

dwNumberOfProcessors; 

DWORD 

dwProcessorType; 

DWORD 

dwAllocationGranulari 

WORD 

wProcessorLevel; 

WORD 

wProcessorRevision; 

SYSTEM INFO ； 



带数据类增为小写字母的字段引语是一种简单的匈牙利命名法，匈牙利出生的杏尔 
斯 • 两朵尼 (Charles Simonyi ) 发明； T 这种命名，因此而得名。匈牙利命名法由 Windows API 
和一些关于 Windows 编程的古老15緒而得到普及，但对 T •应用编程+冉广泛使用。 

在 Windows 语法中，一个 WORD 为一个16位无符号值， C # 程序员将其作为 ushort 。 
DWORD 是一个双 WORD 或一个32位无符号值或 uint . 注意 long 型引用，不是64位 
C # long , 而是 C ++ long ， 和 int 相同或32位。 

LPVOID 翻 if 为“没有类型的长指针”，在标准 C 中为 vid *, DWORD _ PTR 要么为无 
符号的32位，要么为64位整数，取决于是在32位还是64位处理器上运行 Windows 。 这 
些等同 T - C # IntPtr 。 

耑要知道这呰 Windows API 数据类型如何对应于 C # 数据类型，因为要从 C # 程序使用 
这种结构， 就需要-在 C # 中进行珉新定义。幸运的是， SYSTEMJNFO 文档表明 dwOemld 
字段过时了，也就是说可以忽略 union , 可利用公共字段直接创建 C # 结构，也许在此过程 
中吋以给结构指定更具有 C # R 格的 名称： 


struct Systemlnfo 
( 

public ushort wProcessorArchitecture; 
public ushort wReserved; 
public uint dwPageSize; 

public IntPtr lpMinimumApplicationAddress; 
public IntPtr lpMaximumApplicationAddress; 
public IntPtr dwActiveProcessorMask; 
public uint dwNumberOfProcessors; 
public uint dwProcessorType; 
public uint dwAllocationGranularity; 
public ushort wProcessorLevel; 
public ushort wProcessorRevision; 

) 

me # 中，如果想从结构外部访问字段，就必须把7•段定义为 public 。 当然，也吋以重 
命名所有字段(例如 ， ProcessorArchitecture 和 PageSize ). 

还可以指定大小相同的+同数据类型(例如， short 而非 ushort , int 而非 uint ). 如果 
经知道实际值+会溢出符号类型的话。对于 Windows API , 你在做的車怙就是提供内 存块。 
完整结构在32位 Windows 中占36 宁节 内#,而在64位 Windows 中占48宁节内存。 

很多时候，在 P / Invoke 代码中，你会看到前面再加如 K 属性的 结构： 
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[StructLayout(LayoutKind.Sequential )] 
struct Systemlnfo 


StructLayoutAttribute 类和 LayoutKind 枚举都在 System . Runtime.InteropServices 命名空 
间中进行定义，该命名空间有很多与 P/Invoke 相关的其他类。属性明确表明这些字段应视 
为连续并按字节边界对齐。 

现在要把结构传递给 GetNativeSystemlnfo 函数，必须声明函数本身。为此，可以用也 
在 System . Runtime.InteropServices 中进行定义的 DillmportAttribute = 至少必须注明动态链接 
库，而在链接库中可以找到该 函数。 文档表明 GetNativeSystemlnfo 在 kemel 32 .DLL 中进行 
定义。以下为函数 声明： 

[DUImportrkernel32.dll")] 

static extern void GetNativeSystemlnfo(out Systemlnfo systemlnfo); 

该声明必须出现 C # 类定义中，并且和其他方法同一级别。把函数声明为 static (常见于正则 
Cm )， 也 uj •以为 extern (并不常见但表示实际实施函数是在类之 外)。 如果想让函数在类之 
外可见，则可以赋予其 public 关键字。 

除了 extern , 函数卢明似乎是 C # 方法。该方法返回 void , 并且一个参数应用 Systemlnfo 
对象。许多 Windows AI>I 调用需要或返回使用指针参数结构的信息，并且4以通过 out 或 
ref 来定义这些参数。它们在功能上相同，但在调用函数之前 C # 编译器会用 ret •检杳初始化 
的值类型。 

在该类的其他一些方法中，吋以定义 Systemlnfo 类型的值，并将其作为正常静态方法 
来调用该 函数： 

Systemlnfo systemlnfo; 

GetNativeSystemlnfo(out systemlnfo); 

我们来看看一个完整的程序。用 f SystemlnfoPlnvoke 的 XAML 文件在表中使用 Grid 
来格式化从 GetNativeSystemlnfo 得到的信息。 

项目： SystemlnfoPInvoke I 文件： MainPage.xaml < 片段） 



<Style x : Key="rightJustifiedText" TargetType="TextBlock"> 

<Setter Property s ="TextAlignment" Value="Right" /> 

〈Setter Property="Margin" Value-"12 0 0 0" /> 

</Style> 

</Page.Resources 〉 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 
<Grid HorizontalAlignment="Center" 

VerticalAlignment«"Center"> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto M /> 

<RowDefinition Height*"Auto" /> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height- M Auto" /> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height-"Auto" /> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height-"Auto" /> 
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</Grid.RowDefinitions> 


<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto M /> 
<ColumnDefinition Width="Auto" /> 
</Grid.ColumnDefinitions 〉 


<TextBlock Text="Processor Architecture: " Grid.Row*"0" Grid.Column= M 0" /> 
<TextBlock Name="processorArchitecture" Grid.Row"0” Grid.Column="l" 
Style= M {StaticResource rightJustifiedText}" /> 

<TextBlock Text="Page Size: " Grid.Row="l" Grid.Column= ,, 0" /> 

<TextBlock Name="pageSize" Grid.Row<="l" Grid.Column="l" 

Style="(StaticResource rightJustifiedTextJ" /> 


<TextBlock Text="Minimum Application Pddresss: M Grid.Row="2" Grid.Column="0" /> 
<TextBlock Name="minAppAddr" Grid.Row="2" Grid.Column="l" 

Style="{StaticResource rightJustifiedText}" /> 


<TextBlock Text="Maxijrajm Application Addresss: " Grid.Bow="3" Grid.Column="0" /> 
<TextBlock Name="maxAppAddr" Grid.Row="3" Grid.Column-"1" 

Style="(StaticResource rightJustifiedText}" /> 

<TextBlock Text-"Active Processor Mask: •• Grid.Row="4 M Grid.Column="0 M /> 
CTextBlock Name«"activeProcessorMask" Grid.Row-"4" Grid.Column-"1" 

Style= w {StaticResource rightJustifiedText)" /> 


CTextBlock Text="Number of Processors: " Grid.Row="5" Grid.Column="0" 
<TextBlock Name="numberProcessors" Grid.Row="5" Grid.Column="l" 

Style 3 "{StaticResource rightJustifiedText}" /> 


/> 


〈TextBlock Text="Allocation Granularity: M Grid.Row*"6" Grid.Column="0" /> 
〈TextBlock Name="allocationGranularity" Grid.Row="6" Grid.Column="1" 

Style= M (StaticResource rightJustifiedText}" /> 


<TextBlock Text-"Processor Level: •• Grid.Row="7" Grid.Column»"0" /> 
<TextBlock Name="processorLevel" Grid.Row="7" Grid.Column»"l" 
Style= M (StaticResource rightJustifiedText}- /> 


<TextBlock Text-"Processor Revision: •• Grid.Row="8" Grid.Column-"。" 
<TextBlock Name*"processorRevision" Grid.Row="8" Grid.Column="1" 
Style= M (StaticResource rightJustifiedText}" /> 

</Grid> 

</Grid> 

</Page> 


/> 


在代码隐藏文件中，结构和外部函数卢明都在 MainPage 类中进行定义。外部函数必须 
在类定义中进行声明，但结构却+需要，就像其他锌通 C # 结构一样 uj •以在一个完全不同的 
文件中进行声明。以下是完幣的代码隐藏文件。 


项 FI: SystemInfoPInvoke | 义件： MainPage.xaml.es 
using System; 

using System.Runtime.InteropServices; 
using Windows.UI.Xaml.Controls; 
namespace SystemlnfoPInvoke 
( 

public sealed partial class MainPage : Page 


[StructLayout(LayoutKind.Sequential)] 
struct Systemlnfo 
( 

public ushort wProcessorArchitecture; 
public byte wReserved; 
public uint dwPageSize; 

public IntPtr lpMinimumApplicationAddress; 
public IntPtr lpMaximumApplicationAddress; 
public IntPtr dwActiveProcessorMask; 
public uint dwNumberOfProcessors; 
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public uint dwProcessorType; 
public uint dwAllocationGranularity; 
public ushort wProcessorLevel; 
public ushort wProcessorRevision; 

) 

(DllImport("kernel32.dll")] 

static extern void GetNativeSystemlnfo(out Systemlnfo systemlnfo); 
enum ProcessorType 
( 

x86 =* 0, 

ARM = 5, 
ia64 - 6, 
x64 = 9, 

Unknown = 65535 

)? 

public MainPage() 


this.InitializeComponent(); 

Systemlnfo systemlnfo = new Systemlnfo(); 

GetNativeSystemlnfo(out systemlnfo); 
processorArchitecture.Text - 

((ProcessorType)systemlnfo.wProcessorArchitecture).ToString(); 
pageSize.Text * systemlnfo.dwPageSize.ToString(); 

min^jpAddr.Text = ((ulong)systemlnfo.lpMinimumApplicationAdclress).ToString("X"); 
maxAppAddr.Text = ((ulong)systemlnfo.lpMaximumApplicationAddress).ToString("X"); 
activeProcessorMask.Text = ((ulong)systemlnfo.dwActiveProcessorMask).ToStringCX"); 


activeProcessorMask. 
numberProcessors.T« 


a1locationGranularity.Text - systemlnfo.dwAllocationGranularity.T 
processorLevel.Text = systemlnfo.wProcessorLevel.ToString(); 
processorRevision.Text = systemlnfo.wPrrocessorRevision.ToString<" 


ToString 

grx w )； 

.ToStrir 


文档表明 wProcessorArchitecture T 段可以采取 0 值(用丁 • x 86 架 构)、 6值(用 Intel 安 
腾)、9值(用 p x 64 架构)以及适用于“未知”的 OxFFFFo 对于 ARM 处玴器(如微软 Surface 
的首个发布）的值在文档中并没有表明，但所有对能的值均为 winnt . h 中定义的以 
PROCESSOR_ARCHlTECTURE 开头的常鼋， PROCESSOR _ ARCHITECTURE_ARM 定义 
为5。 

为了 简化格式化 wProcessorArchitecture 值，我定义了一个小 enum , 称为 ProcessorType 
并将 wProcessorArchitecture 值转换为该枚举。对丁 • IntPtr 宁-段，我转换为 ulong 并用 I •六 
进制显示。在我写本书所用的平板电脑 h 运行此程序。 
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该平板有64位处理器。程序在微软 Surface 上运行时，如下图所示。 



15.2 — 些帮助 

在使用 P/lnvoke 来定义结构和声明函数时，务必要正确使用。例如，必须提供该函数 
所在的 DLL 的正确文件名。（而在我开发的本章第一个项目中，我输入的是 “ kern e 132. lib ” 
而不是 “ kemel 32. DLL ” ， 我没搞明白为什么不行，>如果访问的不是系统 DLL , 则必须确 
保该 DLL 被应用所引用。还必须正确拼写函数名并正确声明所有参数。 P/lnvoke 町没有 
IntelliSense ! 

结构和函数卢明往往比较复杂。有一个维基 N 站 www . pinvoke.net 能够提供一些帮助， 
很多人都贡献/结构定义和函数声明，你吋以直接复制并粘贴到自己的代码中。也允许你 
贡献自己写的一些代码！ 


15.3 时区信息 

假设你想写一个 Windows Store 应用来敁示世界各地不冋地点的时钟(我在2000年为 
PC Magazine 写过 ClockRack 程序)。其 Windows 8系统版本看起来 "J ■能如卜图所示。 
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这种程序允许你添加新的时钟、设置位置和时区，指定独特颜色，并在应用设 置中保 
留这些信息。 

Windows 内 W 功能支持讣算小同时区的时间，尤其能处理 U 光节约时 N (在一^地方称 
力“釔令时”>问题，如果能利用该功能， 就太好了。 

你会非常有热情在 System 命名空间发现 TimeZonelnfo 类，而且会注总到静态 
GetSystemTimeZones 方法返回世界各地所打时 R 的 TimeZonelnfo 对象集合。然而，如果尝 
试使用这种方法时，你会发现对 Windows 8应用并不可用。在 Windows 8应用中唯一可获 
得的 TimeZonelnfo 对象，是适合当前系统时区设置的对象或小常用的协调世界时对象 
(Universal Coordinated Time , UTC ), (更通常似不准确>的说法是格林尼治标准时间。 

然而 ， Windows 8应用的确能访问向你提供信息的若 T Win 32 函数。 Win 32 
EnumDynamicTimeZonelnformation 函数以 DYNAMIC _ T ! ME _ ZONE_iNFORMATION 结构 
形式枚平世界各地吋 区： 


typedef struct _TIME_DYNAMIC_ZONE_INFORMATION| 

LONG Bias; - 

WCHAR StandardName[32]; 

SYSTEMTIME StandardDate; 

LONG StandardBias; 

WCHAR Day1ightName 【 32 J; 

SYSTEMTIME DaylightDate; 

LCM4G DaylightBias; 

WCHAR TimeZoneKeyName[128]; 

BOOLEAN DynaraicDaylightTimeDisabled; 

) DYNAMIC_TIME_ZONE_INFORMATION, * PDYNAMIC_TIME_ZONE_INFORMATION; 

以下为扩展版 TIME ZONE INFORMATION 结构： 


typedef struct _TIME 一 ZONE-INFORMATION [ 

LONG Bias;~ 

WCHAR StandardName[32 】 ； 

SYSTEMTIME StandardDate; 

LCWG StandardBias; 

aylightName132]; 

IME DaylightDate; 
ylightBias; 

TIME ZONE INFORMATION, *PTXME ZONE INFORMATION; 


WCHAR Day 
SYSTEMTIN 
LONG Dayl 


WCHAR 为宽 16 位 Unicode 字符，其字符数组基本 I . 是零结尾的字符串。 
StandardName 就像是 Eastern Standard Time 字符串， Dayl ightName 就像是 Eastern Daylight 
Time 字符屯。 DYNAM 1 C _ TIME _ ZONE_lNFORMATION 结构中的 TimeZoneKeyName 是 
在 Windows 注册表中使用的键值 。在 Windows 8中，这些注册表项叮以在 
HKEY LOCAL MACHINE / SOFTWARE / Microsoft/Windows NT / CurrentVersion/Time Zones 
找到，而且匹配 StandardName o 

Bias '? ■•段为从 Universal Coordinated Time 中减太•的分钟数 iTi 所狄得的木地时间。对丁- 
关 W 东部时 R , 即为300分钟。 DaylighlBias 是从标准时间减的分钟数，以转换力赵令时， 
通常为-60 ， iflj StandardBias 始终为0。 

DaylightDate 和 SlandardDate 宁•段表 i 何时切换到夏令时间并回到标准时，它为 
SYSTEMTIME 类咽： 


typedef struct 一 SYSTEMTIME ( 
WORD wYear; 

WORD wMonth; 
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WORD wDayOfWeek; 
WORD wDay; 



WORD wMilliseconds; 

) SYSTEMTIME, *PSYSTEMTIME ； 

SYSTEMTIME 结构最主要用丁•和 Win 32 GetLocalTime 和 GETSYSTEMT 1 ME 函数一 
起分别获取当前时间和 UTC 。 TlME _ ZONE _ INFORMAT ! ON 结构中的 SYSTEMT 1 ME 值特 
别编码， 用亍表 ^转换 U 期： wHour 和 wMinute 字段表示转换时间， wMonth 字 段表# 转 
换份(例如，3代表3 月）， wDayOfWeek 字段表示转 换里期 (例如，1代表为星期 wDay 
字段表示在指定月份内某周某天所发生的特定事件(例如，2代表该月的第二个星期 H , 5 
代表 最后一 个星期 H )。 

Windows 能区分在标准时间和赵令时之间进行切换的地点，还能区分毎年动态吏改曰 
期的地点。后者称为使用动态 DST ， 但年份信息不能育接可用。 

GetTimeZonelnformationForYear 函数接受年份参数 k •指向 DYNAMIC _ TIME _ ZONE _ 
INFORMATION 结构的指针，并返回指向 TIME _ ZONE _ INFORMAT ! ON 结构带适合年份 
信息的指针 。 SystemTimeToTzSpecificLocalTime 有指向 TlME _ ZONE_lNFORMATION 结 
构的指针，以及指向 nJ ■能从 GETSYSTEMTIME 函数获得的 SYSTEMTIME 结构的指针， 
并返回表氺当地时区时间的 SYSTEMTIME 结构。因此，程序没有必要执行自身时间转换。 

类似 ClockRack 的程序需要工具使用户为特定地点选择时区。敁好和 Windows 8为用 
户提供的时区选择功能保持一致。 

看一看 Windows 8为用户提供的 功能： 启用 Windows 8超级按钮、选杼 Settings 、 点击 
底部的 Change PC Settings 标签。这样启用一个程序，标题为 PC Settings , 并带有一个列表。 
选择 General , 会在顶部苻到有时区选抒的组合框。毎个时区通过和 UTC 的差值来进行识 
别，有时通过时区名称，经常也有一些示范城市。例如，对于 Romance Standard Time (欧洲 
中部时 间)， 组合框显示如卜'。 

(UTC +01:00)Brussles, Copenhagen, Madrid, Paris 

在 Windows 的时区注册表部分，你会发现这些标签用 Display 名称进行识别，但 Win 32 
函数并没有提供这一信息。你需要访问注册表来获取.但对 Windows 8应用而言，没有现 
在的 Win 32 函数能够访问注册表。 

当然没什么能够阻止你写一个小的桌面 . NET 程序来访问完整 TimeZonelnfo 类并格式 
化所得到的字符串，以便定义能包含到 Windows 8程序的 Dictionary 的对象。我用来斗:成 
该列表的 . NET 程序代码 M 示在 Dictionary 定义上面的注释中。 

项 R: ClockRack | 义件： TiineZoneManager.Display.es ( 片段 > 

namespace ClockRack 

i 

public partial class TimeZoneManager 
{ 

// Generated from tiny .NET program: 

II foreach (TimeZonelnfo info in TimeZonelnfo.GetSystemTimeZones()) 

// Console.WriteLine("{( \"(0J\", \"{1)\" )info.StandardName, info.DisplayName); 
static Dictionary<string, string> displayStrings = new Dictionary<string, string> 
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"Dateline Standard Time**, •• (UTC-12:00) International Date Line West" 
"UTC-11", "(UTC-11:00) Coordinated Universal Time-11" 

"Hawaiian Standard Time", M (UTC-10:00) Hawaii" 

••Alaskan Standard Time", M (UTC-09:00) Alaska" 

"Pacific Standard Time (Mexico)", "(UTC-08:00) Baja California "), 


("Kamchatka Standard Time", "(UTC+12:00) Petropavlovsk-Kamchatsky - Old "), 
1 "Tonga Standard Time ”， "(UTC+13:00) Nuku'alofa" }, 

{ "Samoa Standard Time", '* (UTC+13:00) Samoa" } 


字典在 ClockRack 项 H 中我称为 TimeZoneManager 类。我用该类来加强 P/Invoke 逻辑。 
TimeZoneManager 外部没有代码 wj * 以访问 Win 32 函数或结构。 

TimeZoneManager 类实例化一次，就吋以用于应用的整个运行过程。该类作为以下值 
的集合使时区数据可用于程序的其余部分。 

项冃： ClockRack | 文件： TimeZoneDisplayInfo.cs 
namespace ClockRack 

public struct TimeZoneDisplaylnfo 
( 

public int Bias { set; get; } 

public string TimeZoneKey { set; get; J 

public string Display { set; get; } 


Bias 属性仅用于排序。 TimeZoneKey 和 DYNAM 1 C _ TIME _ Z 0 NE _1 NF 0 RMAT 10 N 结 
构中的 TimeZoneKeyName 相同，而 Display 属性从 displayStrings 字典中获得。 

TimeZoneManager.cs 文件中的 TimeZoneManager 类的一部分先定义必要的 Win 32 结 
构，并声明该类所要求的三个 Win 32 函数。 


项目： ClockRack | 文件： TimeZoneManager.cs (片段 } 
public partial class TimeZoneManager 
{ 

[StructLayout(LayoutKind.Sequential)J 
struct SYSTEMTIME 
( 

public ushort wYear; 
public ushort wMonth; 
public ushort wDayOfWeek; 
public ushort wDay; 
public ushort wHour; 
public ushort wMinute; 
public ushort wSecond; 
public ushort wMi Hi seconds; 


[StructLayout(LayoutKind.Sequential, CharSet = CharSet.Unicode)] 
Struct TIME_ZONE 一 INFORMATION 
{ 

public int Bias; 

[MarshalAs(UnmanagedType.ByValTStr, SizeConst = 32)] 
public string StandardName; 
public SYSTEMTIME StandardDate; 
public int StandardBias; 

[MarshalAs(UnmanagedType.ByValTStr, SizeConst - 32)] 
public string DaylightName; 
public SYSTEMTIME DaylightDate; 






public int DaylightBias; 


[StructLayout(LayoutKind.Sequential, CharSet = CharSet•Unicode > 】 
struct DYNAMIC_TIME_ZONE_INFORMATION 

I 

public int Bias; 

[MarshalAs(UnmanagedType.ByValTStr, SizeConst » 32)] 
public string StandardName; 
public SYSTEMTIME StandardDate; 
public int StandardBias; 

[MarshalAs(UnmanagedType.ByValTStr, SizeConst = 32)J 
public string DaylightName; 
public SYSTEMTIME DaylightDate; 
public int DaylightBias; 

[MarshalAs(UnmanagedType.ByValTStr, SizeConst = 128)J 

public string TimeZoneKeyName; 

public byte DynamicDaylightTimeDisabled; 


【 Dlllmport("Advapi32.dll ") 】 

static extern uint EnumDynamicTimeZonelnformation(uint index, 

% ref DYNAMIC_TIME_ZONE_INFORMATION dynamicTzi); 

(Dlllmport("kernel32.dll")J 

static extern byte GetTimeZonelnformationForYear(ushort year, 

ref DYNAMIC_TIME_ZONE_INFORMATION dtzi, 
out TIME_ZONE_INFOBMATION tzi); 

[DllImportrkernel32.dll ") 】 

static extern byte SystemTimeToTzSpecificLocalTime(ref TIME_ZONE_INFORMATION tzi, 

ref SYSTEMTIME ate, out SYSTEMTIME local) ，- 


回想一下 DYNAMIC _ TIME _ Z 0 NE _1 NF 0 RMAT 10 N 和 TIME _ ZONE_INFORMATION 
结构中的若干字段定义为 WCHAR 数组。这在 C # +可行，因为 C # 数组&终为从堆中指向 
内存的指针。 MarshalAs 属性则允许表明这些字段应该作为特定圾大长度的 C # 字符串。 

TimeZoneManager 类的构造函数 1 R 复调用 EnumDynamicTimeZonelnformation . 直到返 
回非芩值(表明到达列表末 尾)。 在不同版木的 Windows 中，列表项数量可能略有变化，我 
看一共有101项。毎一项都存储在私有字典中，并且每一项都变成 TimeZoneDisplaylnfo 值, 
并添加到名称力 Displaylnformation 的公开 Kf 用集合。 

项 H: ClockRack I 文件 ： TimeZoneManager .cs ( 片段） 
public partial class TimeZoneManager 





TimeZoneDisplaylnfo 


Bias = tzi.Bias, 

TimeZoneKey = t2i.TimeZoneKeyName 

»； 

// Look up the display string 

if (displayStrings.ContainsKey(tzi.TimeZoneKeyName)) 
l 

displaylnfo.Display = displayStrings[tzi.TimeZoneKeyName]; 

» 

else if (displayStrings.ContainsKey(tzi.StandardName)> 

( 

displaylnfo.Display = displayStrings[tzi.StandardName]; 

» 

// Or calculate one 
else 

if (tzi.Bias - = 0) 

displaylnfo.Display 

else 

displaylnfo.Display 


displaylnfo.Display += 


// Add to collection 
displaylnformation.Add(displaylnfo); 

// Prepare for next iteration 
index + = 1; 

tzi = new DYNAMIC_TIME 一 ZONE 一 INFORMATIONO; 


="(UTC> ”； 

=String.Format(" 《 UTC{0m:D2}: {2:D2}) 

tzi.Bias > 0 ? 

Math.Abs(tzi.Bias) / 60, 

Math.Abs(tzi.Bias) % 60); 

: i.TimeZoneKeyName; 


// Sort the display information items 

displaylnformation.Sort((TimeZoneDisplaylnfo infol, TimeZoneDisplaylnfo info2)=> 
return info2.Bias.CompareTo(infol.Bias); 

))； 


// Set to the publicly available property 
this.Displaylnformation = displaylnformation; 

J 

// Public interface 

public IList<TimeZoneDisplayInfo> Displaylnformation { protected set; get;) 


很快就能肴到 Displaylnformation 厲性用作 ComboBox 的 ItemsSource 。 
TimeZoneManager 的最后一个方法是根据时区键值把 UTC 时间转换为本地时间。这和 
DYNAMIC _ TIME _ ZONE_INFORMATION 结构的 TimeZoneKeyName 字段以及 
TimeZoneDisplaylnfo 结构的 TimeZoneKey 属性是相同的。 

项 FI: ClockRack I • 义 • 件 ： TimeZoneManager .cs < 片段） 
public partial class TimeZoneManager 


public DateTime GetLocalTime(string timeZoneKey, DateTime utc) 


// Convert to Win32 SYSTEMTIME 
SYSTEMTIME utcSysTime = new SYSTEMTIME 
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wYear = (ushort)utc.Year, 
wMonth - (ushort)utc.Month, 


wDay (ushort)utc.Day, 
wHour = (ushort)utc.Hour, 
wMinute = (ushort)utc.Minute, 


wSecond = (ushort)utc.Second, 


wMilliseconds = (ushort)utc.Millisecond 


// Convert to local time 

DYNAMIC_TIME_ZONE 一 INFORMATION dtzi = dynamicTzis[timeZoneKey]; 
TIME_ZONE_INFORMATION tzi = new TIME_ZONE_INFORMATION(); 
GetTimeZonelnformationForYear((ushort)utc.Year, ref dtzi, out tzi); 

SYSTEMTIME localSysTime » new SYSTEMTIME(); 

SystemTimeToTzSpecificLocalTime(ref tzi, ref utcSysTime, out localSysTime); 



DateTime 


•sTime.wYear, localSysTime.wMonth, localSysTime.wDay, 
， sTime•wHour, localSysTime.wMinute, 
lSysTime.wSecond, localSysTime.wMilliseconds); 


该方法把 .NET DateTime 转换成 Win 32 SYSTEMTIME , 从私有字典中获得 
DYNAMIC _ TIME _ Z 0 NE _ INF 0 RMAT 10 N . 然后调用 GetTimeZonelnformationForYear , 返 
回 TIME _ ZONE_INFORMATiON 结构形式的信息，冉传递给 SystemTimeToTzSpecificLocalTime 
函数。所得 SYSTEMT 1 ME 冉转换回 .Net DateTime 。 

我对该方法并不完全满总，让我来告诉你为什么。 ClockRack 程序 M 示多个时钟，并使 
用 CompositionTarget.Rendering 方法来获取史新 G 的 DateTime.UtcNow 值，州 丁•所有时钟。 
(我想这町能比 GetLocalTime 方法调用 Win 32 GETSYSTEMTIME 函数来给毎个时钟 UTC 
获取 SYSTEMTIME 值效率高。>我+满意的是要反 复调用 GetTimeZonelnformationForYear 
方法。对每个时区实 际只需 要调用一次该功能.而 TlME _ ZONE _ lNFORMATION 在随后调 
用中可以重复使用。然而，如果程序从12月31曰运行至1月丨曰， 由丁新 年需要重新调 
用。所以我决定+用这种逻辑把类搞乱。 

传递给 GetTimeZonelnformationForYear 的年份应该是本地年份， 而+是 UTC 年份， 
还有一些别 的事情 做得也不完全正确。只有在 UTC 新年临界24小时内，两年才 可能 不同， 
在类似程序中，实际上不应该冇什么问题，因为标准时 间和复 令时之间的转换发生在这年 
下半年。 

然而，如果在南半球的一个特定地点决定在一个公历年中采用 g 令时，而下一年并不 
采用，或者反过来，则该地点在12月31日午夜会经历本地时间变化， il •算两年之间新年 
过渡期间的时间是否 iF 确。 

但我们继续往 下看。 

你可以从第10章中的 AnalogClock 程序识别出实际时钟(称为 TimeZoneClock 的 
UserControl 派生类)，但我对其进行转换以通过数据绑定来使用视图模式。我用因子10减 
少所有來标和 尺寸。 因为<能会在非常狭小的空间内(例如辅屏模式)显示很多时钟，_此， 
时钟尺寸必须能够大幅度变化。我采用的方法是涉及 Viewbox 和自定义血板，最适合时钟 
定义的尺寸小 T 可能的尺寸。 

模拟时钟表血有两个 TextBlock 元素包围，这是另一个区别。最上曲的 TextBlock 元素 
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显示位置，而底部的则 M 示当前 H 期和时间。如果底部没有文字时间，你讨能会凼惑时间 
是中午之前还是之后。 

每个 TextBlock 元素都有 RowDefmition 对 Grid 设置的固定高度，但两者也各有 
Viewbox , (如果文本太长，就压缩到适合长度)。总体而言，整个时钟是一个 Grid , 并有设 
置 e 绑定的 Background 属性。 Grid 会占据整个 hT 用区域。其内部是 Viewbox ， 会调整其内 
容大小。而内容是另一个固定大小为 30*20 的 Grid , 但实际大小由 Viewbox 根据可 用空间 
进行控制。 

项目 ： ClockRack | 文件： TimeZoneClock.xaml ( 片段） 

<UserControl … 

Name="ctrl ,, > 



<Style TargetType="TextBlock"> 

<Setter Property="Margin" Value="12 0" /> 

<Setter Property="TextAlignment" Value®"Center" /> 
</Style> 


<Style TargetType="Path'，> 



<Setter Property="StrokeStartLineCap" Value=»"Round" /> 
<Setter Property="StrokeEndLineCap" Value="Round" /> 

<Setter Property= M StrokeLineJoin" Value="Round" /> 


<Setter Property="StrokeDashCap" Value="Round" /> 
<Setter Property:"Fill" Value="Gray" /> 

</Style> 

</UserControl.Resources 〉 



<SolidColorBrush Color="{Binding Foreground}" /> 
</UserControl.Foreground 〉 



<Gr id. Background 

<SolidColorBrush Color="{Binding Background}" /> 
</Grid.Background> 


<Viewbox> 

<Grid Width="20" 



HorizontalAlignment="Center" 

VerticalAlignment="Center"> 



<TextBlock 



<Grid Grid.Row= 


<!-- Transform for entire clock --> 
<Grid.RenderTransform> 



<!-- Small tick marks --> 

<Path Fill="{x:Null}" 

Stroke="(Binding ElementName=ctrl, Path=Foreground}" 



StrokeDashArray=' 



<EllipseGeometry RadiusX-"90" RadiusY="90" /> 



<!-- Large tick marks --> 

〈Path Fill="{x:Null»" 

Stroke="{Binding ElementName-ctr1, Path=Foreground} 



<EllipseGeometry RadiusX="90 M RadiusY="90 M /> 



Stroke="{Binding ElementName=ctrl, Path=Foreground}"> 



<RotateTransCorm Angle="{Binding HourAngle}" /> 
</Path.RenderTransform> 

</Path> 

<!-- Minute hand pointing straight up --> 

〈Path Data="M 0 -8 C 0 -7.5, 0-7, 0.25 -6 L 0.25 0 



Stroke="{Binding ElementName=ctr1, Path=Foreground)"> 



<RotateTransform Angle®"{Binding MinuteAngle}" /> 



Stroke="{Binding ElementName=ctrl, Path=Foreground}"> 
<Path.RenderTransform> 

<RotateTransform Angle="(Binding SecondAngle}" /> 
</Path.RenderTransform> 



<Viewbox 

<TextBlock Text= 
</Viewbox> 


'(Binding FormattedDateTime)" 


</Viewbox> 

</Grid> 

</UserControl> 


TextBlock 允素和所有 RotateTransform 元素都绑定到视图模式中的一个属性。在 
TimeZoneCIock . xaml 文件幵头，你会看到视图模式还包括 Color 类型的属性，分别称为 
Foreground 和 Background 。 代码隐藏文件只有一个 InitializeComponent 调用。 

为了让程序相对简甲 .， 我决定把每个时钟的背景和前景颜色定为140种颜色，这些颜 
色有名称，对应于静态 Colors 类项。 TimeZoneClock 类的视图模式会如你期望的定义 Color 
类耶的 Foreground 和 Background 属性，但也定义 ForegroundName 和 BackgroundName 属 
性，只要其中一个属性发生改变，另一个也会有一些反射性逻辑变化。 
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项目 ： ClockRack | 文件： TimeZoneClockViewModel.cs ( 片段） 


public class TimeZoneClockViewModel 


tifyPropertyChanged 


string location - "New York City", timeZoneKey = "Eastern Standard Time" 
Color background = Colors.Yellow, foreground = Colors.Blue; 
string backgroundName = "Yellow", foregroundName = "Blue"; 

DateTime dateTime; 

string formattedDateTime; 

double hourAngle, minuteAngle, secondAngle; 

Typelnfo colorsTypelnfo = typeof(Colors).GetTypelnfoO; 

public event PropertyChangedEventHandler PropertyChanged; 

public string Location 
( 

set { SetProperty<string>(ref location, value); } 
get { return location;) 


public string TimeZoneKey 

( 

set ( SetProperty<string>(ref timeZoneKey, value); 
get { return timeZoneKey ;) 


public string BackgroundName 


if (SetProperty<string>(ref backgroundName, value)) 
this.Background = NameToColor(value); 

) 

get { return backgroundName; I 


public Color Background 


if (SetProperty<Color>(ref background, value)) 
this.BackgroundName = ColorToName(value); 

) 

get ( return background;) 


public string ForegroundName 


if (SetProperty<string>(ref foregroundName, value)) 
this•Foreground = NameToColor(value); 

} 

get { return foregroundName; } 


public Color 


if (SetProperty<Color>(ref foreground, value)) 
this.ForegroundName = ColorToName(value); 


get { return foreground; 


public DateTime DateTime 





this.FormattedDateTime - String.FormatC(0:D) {1:t}", value, value); 
this.SecondAngle = 6 * (dateTime.Second + dateTime.Millisecond / 1000.0); 
this.MinuteAngle - 6 * dateTime.Minute + this.SecondAngle / 60; 
this.HourAngle = 30 * (dateTime.Hour % 12) + this.MinuteAngle / 12; 


get { return dateTime;) 


ic string FormattedDateTime 

set ( SetProperty<string>(ref formattedDateTime, value);) 
get { return formattedDateTime;) 


ic double HourAngle 

set { SetProperty<double>(ref hourAngle, value); } 
get { return hourAngle;) 


ic double MinuteAngle 

set ( SetProperty<double>(ref minuteAngle, value);) 
get ( return minuteAngle;) 


ic double SecondAngle 

set { SetProperty<double> (ref SecondAngle, value );) 
get ( return SecondAngle;) 


r NameToColor(string name) 



ng ColorToName(Color color) 

foreach (Propertylnfo property in colorsTypelnfo.DeclaredProperties) 
if (color.Equals((Color)property.GetValue(null))) 
return property.Name; 

return 


ected bool SetProperty<T>(ref T storage, T value, 

fCallerMemberNarael strina = nul M 




if (PropertyChanged != null) 

PropertyChanged(this, new PropertyChanqedEventArqs(propertvNar 
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该视图模式还包括 DateTime 属性，只要 DateTime 发生变化， HourAngle、MinuteAngle 
和 SecondAngle K 性也会随之变化，并且驱动 TimeZoneClock.xaml 中的 '个 RotateTransform 
对象。 

为了显示多个时钟，我需要一个面板把所有时钟都显示在页面范 围内， 并给每个时钟 
分配圾佳空间。第11章中提到的 UniformGrid 面板似乎接近我的要求，但又不完全是。例 
如，假设有七个时钟， UniformGrid 把它们分成两行来显示。 UniformGrid 会把五个时钟放 
在第一行，其余两个放在第二行。如果第一行放四个，而第二行放三个，这样更均匀，摆 
放起来更美观。 

ClockRack 程序包含对第 1 丨章的 Petzold . ProgrammingWindows 6 .Chapterl 1 库的引用， 
但从 UniformGrid 派牛.了名为 DistributedUniformGrid 的 llri 板。该新类的逻辑是给神行分配 
大致相当的项目。毎一行项 H 间隔相同。 

项 H: ClockRack I 文件： DistributedUniformGrid.cs 

using System; 

using Windows.Foundation; 

using Windows.UI.Xaml.Controls; 

using Petzold.ProgrammingWindows6.Chapterll; 

namespace ClockRack 


public class DistributedUniformGrid : UniformGrid 


protected override Size ArrangeOverride(Size finalSize) 



finalSize.Width 


double cellHeight = finalSize.Height / rows; 
int displayed * 0 ; 


if (this.Orientation = Orientation.Vertical) 



double y = row * cellHeight; 

int accumDisplay = (int)Math.Ceiling((row + 1.0) * 
this.Children.Count / rows); 
int display = accumDisplay - displayed; 
cellWidth = Math.Round(finalSize.Width / display); 



for (int col * 0 ; col < display; col++) 

{ 

if (index < this.Children.Count) 

this .Children lindex 】 .Arrange (newPect(x, y, cellWidth, cellHeight)); 






displayed += display; 



MainPage.xaml 文件包含 DistributedUniformGrid 来控制时钟控件。 

项 R: ClockRack I 文件： MainPage.xaml ( 片段 > 

<Page ... > 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 
〈Grid Name="contentGrid" 

Background="Transparent"> 



</Page> 

MainPage 类的构造函数负责从应用设 W 中填入 DistributedUniformGrid 。 程序用 

Windows . Storage 命名空间中的的 ApplicationData 类来存储每个时钟的四个文本项： 位置名 

称(由用户选择)、用来识别时区的时区键、前景色名称和背景色名称。对丁•第一个时钟， 

存储四个文木项目使用的键值为 “ OLocation ” 、 “ OTimeZoneKey ” 、 “ OForeground ” 和 

“ OBackgrmmd ” ，第：时钟的键值以数字1幵头，以此类推。如果检索每组设置，则创建 

并初始化 TimeZoneClock 和 TimeZoneClockViewModel 。 

项 ClockRack I 义件： MainPage.xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 
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}； 

uniformGrid.Children•Add < clock); 
index +- 1; 

) 

"If there are no settings, make a default Clock 
if (uniformGrid.Children.Count « 0) 

{ 

TimeZoneClock clock = new TimeZoneClock 
{ 

DataContext * new TimeZoneClockViewModel() 

)； 

uniformGrid.Children.Add(clock); 


// Set the Suspending handler 

Application.Current.Suspending += OnApplicationSuspending; 


// Start the Rendering event 

CompositionTarget.Rendering += OnCompositionTargetRende ring; 


void OnApplicationSuspending(object sender, SuspendingEventArgs args) 

( 

appSettings.Clear 0; 

0; index < uniformGrid.Children.Count; index++) 

niformGrid.Children[index] as TimeZoneClock; 


for (int index 
( 

TimeZoneClock timeZoneClock 
TimeZoneClockViewModel 

timeZoneClock.DataContext as TimeZoneClockViewModel; 
string preface ■ index.] 


-k = unif 
.ewModel 


appSettings[preface 
af^Settings[preface 
appSettings[preface 
appSettings[preface 


"Location"] ■ viewModel.Location; 
"TimeZoneKey"J * viewModel.TimeZoneKey; 
"Foreground"] ■ viewModel.ForegroundName; 
••Background"】=vie wMode 1. Bac kgroundName; 


像往常一样，这些设置在 Suspending 事件中进行保存。 

构造函数 5 J / TI •触发 CompositionTarget.Rendering 車件。它负责使用 TimeZoneManager 
实例，基 于当前 UTC 时间和时区键值来获取每个时钟的本地时间。 

项月 ： ClockRack | 文件： MainPage.xamI .cs ( 片段） 
public sealed partial class MainPage : Page 



void OnCompositionTargetRendering(object sender, object args) 

( 

// Get the time once 
DateTime utc = DateTime.UtcNow; 


foreach (UIElement child in uniformGrid.Children) 

( 

TimeZoneClockViewModel viewModel = 

(child as FrameworkElement).DataContext as TimeZoneClockViewModel; 
string timeZoneKey = viewModel.TimeZoneKey; 


// Set the local time from the TimeZoneManager 

viewModel.DateTime = timeZoneManager.GetLocalTime(timeZoneKey, utc); 


右击显示 PopupMenu . 其中有二 项： Add 、 Edit 和 Delete 。 Edit 和 Delete 从属于被点 
击的特定时钟，因此 OnRightTapped 覆写会先发现这个时钟。对象传递到这1项的处理程 
序。即使对于 Add , 也需要点击时钟，因为在点击时钟后逻辑会插入新时钟。只要有多个 
时钟， Delete 就就会出现在菜单中。 

项目 ： ClockRack | 文件 : MainPage.xaml.cs ( 片段 } 

async protected override void OnRightTapped(RightTappedRoutedEventArgs args) 

I 

// Check if the parent of the click element is a TimeZoneClock 
FrameworkElement element « args.OriginalSource as FrameworkElement; 

while (element !- null) 

( 

if (element is TimeZoneClock) 
break; 

element = element.Parent as FrameworkElement; 

if (element == null) 


// Create a PopupMenu 

PopupMenu popupMenu = new PopupMenu(); 

popupMenu.Commands.Add(new UlCommand("Add...", OnAddMenuItem, element)); 
popupMenu.Commands.Add(new UlCommand("Edit ", OnEditMenuItem, element)y 


lit — ", OnEditMenuItem, element)); 


if (uniformGrid.Children.Count > 1) 

popupMenu.Conunands.Add(new UlCommand("Delete", OnDeleteMenuItem, element)); 


args.Handled = 
base.OnRightTa- 


true; 

pped(args); 


// Display thi 


the men 
popupMenu.Sh 


3.GetPosition(this)); 


对于 Add 菜中.项，必须创建新的 TimeZoneClock (带有对应 TimeZoneClockViewModei ) 
并将其插入集合中。点击时钟后，总是要插入新时钟。 


ClockPack | 义件： MainPage.xamI.cs ( 片段） 
OnAddMenuItemdUIComniand command) 

// Create new TimeZoneClock 
TimeZoneClock timeZoneClock = new TimeZt 


// Insert after the tapped clock 

TimeZoneClock clickedClock = command.Id as TimeZoneClocJ 
int index = uniformGrid.Children.IndexOf(clickedClock); 
uniformGrid.Children.Insert(index + 1, timeZoneClock); 


Delete 也相当容易，但程序会咯持用 MessageDialog 来得到删除确认。 


项 ClockRack | 义件： MainPage.xaml.cs ( 片段 > 
async void OnDeleteMenuItem(IUICommand command) 









popup.IsOpen 
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以卜为 SettingsDialog 效果。第一个字段为 EditBox ， 允 I 午你在标签进行输入；其他三 
个字段使用 ComboBox 来显示当前选中的菜单项。如果控件接收到输入焦点 ， ComboBox 
就会打开并显水项 H 列表： 



SettingsDialog 对象的 DataContext 设定为正在编辑的 TimeZoneClock 的 DataContext 。 
DataContext 属性是 TimeZoneClockViewModel 的对象，而 XAML 文件经绑定到该类的 


Location 、 TimeZoneKey、ForegroundName 和 BackgroundName 厲性。请注意，绑定到 Location 
属性的 TextBox 会设置其 TextChanged 事件，可以使代码隐藏文件 “ 手动”更新 
TimeZoneClockViewModel 的 Location 属性，然后更新弹窗的顶部内容。 

项目 : ClockRack | 文件： SettingsDialog.xaml ( 片段 > 



<UserControl.Resources 〉 

<Style x:Key="DialogCapcionTextStyle" 
TargetType="TextBlock" 

BasedOn="{StaticResource CaptionTextStyle}"> 
<Setter Property="FontSize" Value="14.67" /> 
〈Setter Property="FontWeight" Value*"SemiLight" /> 
<Setter Property= M Margin M Value="0 16 0 8" /> 
</SCyle> 


<DataTemplate x:Key="colorItemTemplate"> 

<!-- Item is SettingsDialog.ColorItem --> 

<StackPanel Orientation="Horizontal"> 

〈Rectangle Width="96" Height="24" Margin="12 6"> 
〈 Rectangle.Fill 〉 

<SolidColorBrush Color="{Binding Color}" /> 
</Rectangle.Fill 〉 



<TextBlock Text="(Binding Name}" 

VerticalAlignment="Center" /> 



</DataTemplate> 









<!-- Location ■- > 

<TextBlock Text="Location" 

Style="{StaticResource DialogCaptionTextStyle)" /> 

<TextBox Name="locationTextBox" 

Text*"{Binding Location}" 

TextChanged="OnLocationTextBoxTextChanged" /> 

<! — Time Zone --> 

<TextBlock Text="Time Zone" 

Style="(StaticResource DialogCaptionTextStyle)" /> 



<ComboBox Name="backgroundComboBox" 

ItemTemplate="(StaticResource colorltemTemplate}" 
SelectedValuePath="Name" 

SelectedValue="(Binding BackgroundName, Mode=TwoWay)" /> 



代码隐藏文件 ( 如卜所 示) 为三个 ComboBox 控件提供集合。时区的 ComboBox 由 
TimeZoneManager 的 Displaylnformation 属性填充，而第一个 ComboBox 的标记引用了 
TimeZonelCey 和 Display 厲性。 

我 LL 经对 UniformGrid 使用了 Petzold.ProgrammingWindows6.Chapterl 丨库，因此，我 
决定使用 NamedColor 类来获得 NamedColor 对象集合。正如 XAML 文件所水，用于两个 






原生 


ComboBox 控件的 ItemTemplat 引用 NamedColor 的 Color 和 Name 属性，而每个 ComboBox 

则表明 SelectedValuePath 为 Name 属性。 

项目 ： ClockRack | 文件： SettingsDialog.xaml.cs ( 片段 > 
public sealed partial class SettingsDialog : UserControl 




ClockRack 就这么多代码。 


15.4 DirectX 的 Windows Runtime Component 封装器 

P/Invoke 能够很好地用 于调用 Win32 API 中的各种函数 . 而处理 DirectX 却是另一回 
車。 DirectX 对 P/Invoke 有点不合适，最好通过 C++ 代码来访问。如果想从 C # 程序使用 
DirectX. 可以用 C++ 写一个包含所有 DirectX 代码的 Windows Runtime Component 并从它 
访 H 。 对于 DirectX 的一些小领域，你自己就可以搞定，也可以寻求更广泛的解决方案， 
例如 hitp://code.google.com/p/sharpdx 所提供的开源 SharpDX 库。 

然而，你吋能会觉得通过封装库用 C# 程序来访问 DirectX 是在自欺欺人。使用 DirectX 
的一个原因是出丁 - 性能，并 H. 常常涉及 DirectX 库本身的性能 ( 独立于使用 DirectX 库的语 
言 ) 和应用代码的性能。如果用 C++ 而不是用 C# 写代码，应用代码通常运行得更快(即使用 
C# 代 码可能 会写得更快，错误更少 ) 。因此，你吋能想用 C++ 来写一些或全部 DirectX 应用 
代码。 

我 Klfi] 要展示的 DirectXWrapper 库绝对少见。我刻意将其限定义为三项具体工 作：获 
取安装在系统 I: 的字型列表、获取特定字甩的字型规格以及在 SurfacelmageSource 对象 l_. 
iBi 线条。 SurfacelmageSource 实际 t 是一个位图，只不过没有我在第 14 章中实现的画线 
算法。 

为了在 Visual Studio 中创建该库，我做了一个新的解决方案及项目，名为 
DirectXWrapper 。 在 New Project 对话框的左侧列表中，我将其名称指定为 C++ Windows 
Store 项目。我在对话框中心区所选的模板是 Windows Runtime Component 。 这是一个 
Windows 8 库，可以用 • 种 语言进行编码 ( 木例中为 C++) ，也可以通过其他 Windows Store 
应用进行访问，包括用 C#、Visual Basic 和 JavaScript 程序。由于这种灵活性 ， Windows 
Runtime Component 有非常严格的限制 。 Windows Runtime Component 无汰执 行语言之外的 




事情。 

Windows Runtime Component 最 M 著的限制如 h » 

• 公共类必须密封或非实例化。 

• 公共方法的参数和返回值必须为 Windows Runtime 类划。 

• 公共 C++ 类和结构必须定义为 ref ( 意为引用计数)。 

• 结构的公共成员限 T 字段。 

Windows 8 帮助文档描述了其他限制。搜索 “Creating Windows Runtime Components” 
可以了解更多。 

DirectXWrapper 项 0 需要引用一些默认不包含的 C+ + 库。在 Solution Explorer 中，我 
用鼠标右键点击项 t3 名称，并选择 Properties ， 随后出现一个标题为 DirectX Wrapper Property 
Pages 的对话框。对话框顶部是一个 Platform 组合框。我选择 All Platforms 。 在对话框左侧， 
我选择 Configuration Properties、Linker 和 Input.o 在所得项列表的顶部是一个 Additional 
Dependencies 的字段。 ¥. 击该字段，然后选择 Edit 。你随后会看到一个 Additional 
Dependencies 对话框《 > 我在列表中加入 3 个 DirectX 库： 

• d2dl .lib 

• d3dll .lib 

• dwrite .lib 

前两个库用于 2D 和 3D 图形，在 SurfacelmageSource 卜 . 绘图是要求两者都有的。第三 
个库用于 DirectWrite 。 

DirectXWrapper 库还要求访问和这些库相关的一些头文件。在 pch.h (“ 预编译头文件 ”) 
文件中，我包括了必要的几个头文件。 

项 DirectXWrapper | 文件： pch.h 

•pragma once 



•include 〈 windows.ui•xaml.media.dxinterop.h> 

wrl.h 头文件代表 Windows Runtime Library 并包含对处理 Windows 8 应用 COM 有用的 
定义。 windows.ui.xaml.media.dxinterop.h 头文件有一个声明，声明使用 SurfacelmageSource 
类所需的 I Surface I mageSourceN ati ve 接口。 

15.5 DirectWrite 和字型 

DirectWrite 是专用于文本的高性能显不 • 的 DirectX 子集。即使你不耑要这种高性能显 
示， DirectWrite 也提供了 Windows Runtime 缺少的一些工具，特别值得一提的是能 获取己 
安装的字型列表和字型规格。 

为了访问 DirectWrite. 我决定在 DirectXWrapper 库中 通过 DirectWrite 接口 - 对应 

的方法来定义类。这些接口都以 1 DWrite 开头：丨代表 interface, DWRITE 代表 DirectWrite 。 
我所对应的类直接以 Write 幵头。 
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- 开始会有一点乱，但我要依次 i 、 丨论下表所 〆 的对应关系。 


DirectWrite 接口 

DirectXWrapper 类 

IDWriteFactory 

WriteFactory 

IDWriteFontCollection 

WriteFontCollection 

IDWriteFontFamily 

WriteFontFamily 

IDWriteFont 

WriteFont 

IDWriteLocalizedString 

W riteLocal izedStrings 


在很多怙况 _F ， DirectWrite 接口中的方法名称 ( 例如， IDWriteFont 中的 GetMetrics 方 
法 ) 都吋以直接进行 复制： WriteFont 类也有 GetMetrics 方法。我并不想复制接口中的所有 
方法。 

为了使用 DirectWrite , 程序一开始会调用 DWriteCreateFactory 函数来获取 
lDWriteFactory 类型的对象。在许多其他方法中， IDWriteFactory 接口会定义 
GetSystemFontCollection 来获取系统当前所安装的字型。 

我在我己的 WriteFactory 类中封装了 IDWriteFactory 。 如下为 C++ 头文件。 

项 H: DirectXWrapper I 文件： WriteFactory.h 
•pragma once 

•include "WriteFontCollection.h" 



public ref class WriteFactory sealed 
{ 

private: 

Microsoft: : WRL: : ComPtr<IDWriteFactory> pFactory; 
public: 

WriteFactory(); 

WriteFontCollection^ GetSystemFontCollection(); 

WriteFontCollection A GetSystemFontCollection(bool checkForUpdates); 

)： 

} 

WriteFactory 类用 ref 和 sealed 定义，在 Windows Runtime Component 中志要用于公共 
C++ 类。 ref 表小 1 该类必须用 ref new 初始化，而不仅仅是用 new , 构造函数返回引用计数句 
柄，而不是返回指针。 

从 DWriteCreateFactory 获得的 IDWriteFactory 对象存储为 ComPtr 私有字段 ， ComPtr 
在 Microsoft.Wr! 命名空 M 中进行定义 ( 或在使 C++ 语法的 Microsoft::WRL 命名空间)。 
ComPtr 是 “Common Object Model pointer” 的简称 ( 把指针指向 COM 对象）,比如 
IDWriteFactory 变成 “ 智能指针 ” ，也就是引用汁数，并且适当释放自己的资源。在 Windows 
8 的 DirectX 代码中，推荐采用这种方式来维持指向 COM 对象的指针。 

这三个公共方法也在头文件中进行 定义： 一个构造函数和两个版本的 
GetSystemFontCollection 方法。 这些方法返回 WriteFontCollection 对象。返回的对象不是 
DirectWrite 类喂。 不能是 DirectWrite 类切，因为 Windows Runtime Component 中的公共方 
法只能返回 Windows Runtime 类甩。 返回的对象是 DirectXWrapper 库的另 • 一个类。 （ A ) 表示 
WriteFontCollection 是句柄，而 + 是指针，也就是说，也用 ref 关键宁 • 进行定义，在 C ++ 中 
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用 ref new, 而不只是用 new 进行初始化。 

头文件中提到的 WriteFontCollection 类要求在开头加入 WriteFontCollection.h 头文件。 
实现 WriteFactory 类是在 WriteFactory.cpp 文件中进行的。 

项月 ： DirectXWrapper I 文件： WriteFactory.cpp 
# include "pch.h" 



构造函数调用 DWriteCreateFactory 函数以获取 ID WriteFactory 对象。 uuidof 操作符获 
得标识此对象的 GUID 。 DirectX 函数和方法很多时候返回的都是 HRESULT 类型的值。该 
值就是一个表水成功或失败的数字，但很重要，不可忽略。如果发生错误 ， Windows 8 程 
序的标准方法会抛出 COMException 类型的异常。请注意用 ]• 初始化 COMException 类的 
ref new , 它其为 Windows Runtime 类型。 

WriteFactory 类中的 GetSystemFontCollection 方法使用 IDWriteFactory 对象来调用该接 
口的 GetSystemFontCollection 方法，以获得指向 DirectWrite ID WriteFontCollection 接口的 
指针。指针传递到 WriteFontCollection 构造函数。请再次注意 ref new 。 

以下为 WriteFontCollection 头文件。 


项 R: DirectXWrapper | 文件： WriteFontCollection.h 
♦pragma once 
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WriteFontCollection (Microsoft: : WRL: : CanPtr<IDWriteFontCollection> pFontCollection); 
public: 

bool FindFamilyName(Platform: : String A familyName, int * index); 
int GetFontFamilyCount(); 

WriteFontFamily A GetFontFamily(int index); 

)； 

) 

构造函数定义为只限于库内部。不能为 private, 因为小能从类的外部访问该构造函数 
(WriteFontFactory 类显然需要调用该函 数)。 但也不能为 public, 因为构造函数的参数并不 
是 Windows Runtime 类型。还要注意对 Platform 命名空间定义的 String 类的使用。 String 
类是 Windows Runtime 类型，等同于在 System 命名空间定义的 C# String 类。 
WriteFontCollection 的实现如 卜所 示。 

项 R: DirectXWrapper | 文件： WriteFontCollection.cpp 



•include "WriteFontCollection.h" 
#include "WriteFontFamlly.h" 


using namespace DirectXWrapper; 
using namespace Platform; 
using namespace Microsoft: : WRL; 



bool WriteFontCollection: : FindFamilyName(String 7 ' familyName, int * index) 



HRESULT hr = this->pFontCollection->FindFainilyNaine(familyName->Data (), &familylndex, Sexists}; 

if {!SUCCEEDED(hr)) 

throw ref new COMException(hr); 


•index = familylndex; 



WriteFontFamily A WriteFontCollection: : GetFontFamily(int index) 



从该集合获取特定字型的过程分为两步。旨先，必须调用有特定名称(如 Times New 
Romany 调用 FindFamilyName, 以获得集合中的索引。索引随后传递到 GetFontFamily, 以 




得到 lDWriteFontFamily 对象(如果使用 DirectWrite ) 或 WriteFontFamily 对象(如果使用 
DirectXWrapper 库)。 

另一种方法是使用传递给 GetFontFamily 的索引枚举集合中的所有字型，不超过 
GetFontFamilyCount 的返回值。 

以下为 WriteFontFamily 头文件。 

项 R: DirectXWrapper | 文件： WriteFontFamily.h 
•pragma once 

•include "WriteLocalizedStrings.h" 

•include "WriteFont.h" 

namespace DirectXWrapper 
{ 

public ref class WriteFontFamily sealed 
{ 

private: 

Microsoft: : WRL: : ComPtr<lDWriteFontFamily 〉 pFontFamily; 
internal: 



public: 

WriteLocalizedStrings A GetFamilyNames(); 

WriteFont A GetFirstMacchingFont(Windows: : UI :: Text :: FonCWeight fontWeight, 

Windows :: UI :: Text: : FontStretch fontStretch, 
Windows :: UI :: Text: : FontStyle fontStyle); 

>； 

) 

看一看 GetFirstMatchingFonI 参数，它均为 Windows Runtime 类带，因为都是在 
Windows.UI.Text 命名空间中定义的。 FontWeight 是一种结构，为 FontWeights 类中的静态 
属性类型，而 FontStretch 和 FontStyle 均为枚举。在 lDWriteFontFamily 接口所实施的 
GetFirstMatchingFonI 方法中，参数类型为 DWRITE_FONT_WEIGHT 、 
DWRITE_FONT_STR£TCH 和 DWRITE_FONT_STYLE , 均为 枚举。 冇趣的是， FontStretch 
和 FontStyle 值 uf 以肓接转换，两个枚举有相同的值，表明 DirectWrite 是 Windows Runtime 
的文本输出基础。 

项目 ： DirectXWrapper 丨文件： WriteFontFamily.cpp 
# include "pch.h" 

Iinclude "WriteFontFamily.h" 

using namespace DirectXWrapper; 
using namespace Platform; 
using namespace Microsoft: : WRL; 
using namespace Windows: : UI: : Text; 



return ref new WriteLocalizedStrings(pFamilyNames); 


eFont*' WriteFontFamily: : GetFirstMatchingFont(FontWeight fontWeight, 

FontStretch fontStretch, 
FontStyle fontStyle) 

// Convert font weight from Windows Runtime to DirectX 
DWRITE_FONT 一 WEIGHT writeFontWeight = DWRITE_FONT_WEIGHT_NORMAL; 

if (fontWeight.Equals(FontWeights :: Black)) 

writeFontWeight = DWRITE_FONT_WEIGHT_BLACK; 

else if (fontWeight.Equals(FontWeights: : Bold)) 
writeFontWeight = DWRITE_FONT_WEIGHT_BOLD; 


else if (fontWeight.E 


•s(FontWeights: : ExtraBlack)) 
RITE FONT WEIGHT EXTRA BLAC ： 


else if (fontWeight.Equals(FontWeights: : ExtraBold)) 
writeFontWeight = DWRITE FONT WEIGHT EXTRA BOLD; 


else if (fontWeight.Equals(FontWeights :: ExtraLight)) 
writeFontWeight = DWRITE_FONT 一 WEIGHT EXTRA LIGHT 


EXTRA LIGHT; 


else if (fontWeight.Equals(FontWeights: : Light)) 
writeFontWeight *= DWRITE FONT 一 WEIGHT 一 LIGHT; 


writeFontWeight = DWRITE_FONT_WEIGHT 一 MEDIUM; 

else if (fontWeight.Equals(FontWeights: : Nonnal)) 
writeFontWeight = DWRITE_FONT_WEIGHT_NORMAL; 

else if (fontWeight.Equals(FontWeights :: SemiBold)) 
writeFontWeight = DWRITE_FONT_WEIGHT_SEMI_BOLD; 

else if (fontWeight.Equals(FontWeights: : SemiLight)) 
writeFontWeight = DWRITE_FONT_WEIGHT_SEMI LIGHT 


=DWRITE FONT 


// Conv 
DWRITE 


font stretch from Windows Runtime to Direct 
r STRETCH writeFontStretch - (DWRITE FONT ST 


ETCH)fontStretch; 


// Convert font style from Windows Runtime to DirectX 
DWRITE_FONT_STYLE writeFontStyle - (DWBITE_FONT_STYLE)fontStyle; 

ComPtr<IDWriteFont> pWriteFont = nullptr; 

HRESULT hr = pFontFamily->GetFirstMatchingFont(writeFontWeight, 

writeFontStretch, 


&pWriteFont); 


if (!SUCCEEDED(hr)) 

throw ref new COMException(hr); 


return ref new 


7 - 型家族通常有一个名称，比如 Times New Roman, 但在 DirectWrite 中，字型名称则 
有针对 + 同地点和语 H 的若干名称。 GetFamilyNames 方法返回的不是一个名称，而是存储 
在 IDWriteLocalizedStrings 中的名称集合。这些字符串是由标准地点名称进行识别，例如， 
EN-US 代表美式英语。 



Windows 程序设计 ( 第 6 版 ) 


项目 ： DirectXWrapper | 文件： WriteLocalizedStrings.h 
# pragma once 

namespace DirectXWrapper 

{ 

public ref class WriteLocalizedStrings sealed 

l 

private : 

Microsoft: : WRL: : ComPtr<IDWriteLocalizedStrings> pLoca1izedstrings; 
internal : 

WriteLocalizedStrings(Microsoft::WRL: : ComPtr<IDWriteLocalizedStrings> 

pLocalizedStrings) 



int GetCount(); 

Platform: : String^ GetLocaleName(int index); 

Platform: : String*' GetString (int index); 

bool FindLocaleName(Platform: : String A localeName, int * index); 


实现如下所示。 

项 R: DirectXWrapper | 文件： WriteLocalizedStrings.cpp 
#include "pch.h" 

#include "WriteLocalizedStrings.h" 


>pai 

»pai 

>pai 


DirectXWrapper; 
Platform; 
Microsoft: : WRL; 













UINT32 length = 0; 

HRESULT hr = this->pLocalizedStrings->GetStringLength(index, &length); 


if (!SUCCEEDED(hr)) 

throw ref new COMException(hr); 


wchar 一 t* str ■ new (std: : nothrow) wchar_t[length + 1J; 
if (str =* nullptr) 

throw ref new COMException(E_OUTOFMEMORY); 

hr = this->pLocalizedStrings->GetString(index, str, length + 1); 

if (!SUCCEEDED(hr)) 

throw ref new COMException(hr); 


COMExce 
ef new S 


delete[ 】 str; 
return string; 


bool WriteLocalizedStrings ::l 


localeName, int * index) 


uint32 localeIndex - 0; 
BOOL exists = false; 


RESULT hr = this->pLocalizedStrings->FindLocaleNc»me(localeName->Data(), 

&localeIndex, sexists); 


if ('.SUCCEEDED(hr)) 

throw ref new COMException(hr)j 

•index = localeIndex; 


代码中的大部分混乱涉及分配 C++ 字符串 ( 真正的字符数组 ) 来调用 DirectWrite 方法 , 
并将其转换为从 DirectX Wrapper 实现返回的 Windows Runtime String 对象。 

以下为 WriteFont 头文件。 


项 R: DirectX^ 
#pragma once 


文件 : WriteFont.h 


namespace DirectXWrapper 

public ref class WriteFont sealed 

{ 

private: 

Microsoft: : WRL: : ComPtr<IDWriteFont> pWriteFont; 
internal: 

WriteFont(Microsoft: : WRL: : ComPtr<IDWriteFont> pWriteFont); 


bool HasCharacter(UINT32 unicoc 
bool IsSymbolFont(); 
WriteFontMetrics GetMetrics{); 


实现如卜 T 开示。 

项 H: DirectXWrapper | 文件： WriteFont.cpp 
#include "pch.h" 


652 Windows 程序设计(第 6 版) 


•include "WriteFont.h" 

using namespace DirectXWrapper; 
using namespace Platform; 
using namespace Microsoft: : WRL; 

WriteFont: : WriteFont(ComPtr<IDWriteFont> pWriteFont) 

{ 

this->pWriteFont = pWriteFont; 


WriteFontMetrics WriteFont: : GetMetrics 0 
{ 

DWRITE_FONT 一 METRICS fontMetrics; 
this->pWriteFont->GetMetrics(ifontMetrics); 



fontMetrics.designUnitsPerEm, 


fontMetrics.ascent, 
fontMetries.descent# 
fontMetrics.lineGap, 



fontMetrics.strikethroughPosition, 
fontMetrics.strikethroughThickness 

)； 

return WriteFontMetrics; 


bool WriteFont: : HasCharacter(UINT32 unicodeValue) 

1 

BOOL exists =0; 

HRESULT hr = this->pWriteFont->HasCharacter(unicodeValue, Sexists); 

if (!SUCCEEDED(hr)) 

throw ref new COMException(hr); 

return exists != 0; 


bool WriteFont::IsSymbolFont() 

{ 

return this->pWriteFont->IsSymbolFont() != 0; 

) 

GetMetrics 方法的 DirectWrite 版木填充 DWRITE_FONT_METRICS 类型结构。当然， 
Windows Runtime Component 不能直接返回该结构，因此我自己定义了这个结构。 

项月 ： DirectXWrapper | 文件： WriteFontMetrics.h 
tpragma once 

namespace DirectXWrapper 

{ 

public value struct WriteFontMetrics 
{ 

UINT16 DesignUnitsPerEm; 

UINT16 Ascent; 

UINT16 Descent; 

INTI6 LineGap; 

UINT16 CapHeight; 

UINT16 XHeight; 

INT16 UnderlinePosition; 

UINT16 Under1ineThickness; 








); 


INTI6 StrikethroughPosition; 
UINT16 StrikethroughThickness; 


前面就是 DirectXWrapper 库中实现 DirectWrite 的所有代码。显然，可供 DirectWrite 
使用的多于我试图提供给 C# 程序的，但我现在有了两项基本工作所需要的东西。 

我们来枚举己安装字型。 EnumerateFonts 项目是一个普通的 Windows 8 C# 项目，只不 
过在解决方案资源管理器中 • 我是在用鼠标右键点击解决方案名称，并选择 Add an Existing 
Project 。 我添加的项目为 DirectXWrapper 。 和通常一样，当调用库项目的时候，我也右键 
中-击 EnumerateFonts 中的 References 部分，选择 Add Reference . 并在 Add Reference 对话 
框中选择左侧的 Projects 和 DirectXWrapper 。 

EnumerateFonts 的 XAML 文件包含 ListBox 。 

项冃 ： EnumerateFonts | 文件： MainPage.xaml 《片段 > 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

<ListBox Name="lstbox"> 

<ListBox.ItemTemplate> 

<DataTemplate> 

<TextBlock Text= •• 丨 BindingJ" 

FontFami ly= n I Binding J" 

FontSize="24" /> 

</DataTemplate> 

</ListBox. ItemTeniplate> 

</ListBox> 

</Grid> 


站然， ItemTemplate 预计 ListBox 会填满字型家族名称。每个名称都用基于字型库里的 
字型进行敁示。 ListBox 通过代码隐藏文件的构造函数进行填充。 



WriteLocalizedStrings writeLocalizedStrings = 
writeFontFamily.GetFamilyNames(); 

int index; 
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else 



正如你所看到的， DirectXWrapper 类及方法就像普通 Windows Runtime 类一样访问及 
使用。程序试图找到名为 “EN-US” 地域的 字型； 如果没有，则获取集合中的第一个。而 
实际上，许多 Windows 8 字型都只有一个名称，但一些为远东语言设计的字型则有另外的 
中文、韩文和日文名称。 

F 图所示的这些字体可能你 U 己的系统上也有。 



15.6 配置和平台 

Visual Studio 的标准 L 具栏包括两个下拉组合框，分别名为 Solution Configurations 和 
Solution Platformso 

Solution Configurations 有以卜 ‘ 三个选项： 

• Debug 

• Release 

• Configuration Manager 

前两项允许你以两种不同的方式来编译程序，而在正常情况 F ， 你会在程序开发过程 
中使用 Debug 配置。但如果己经完成大部分调试工作，就可以切换到 Release 配置以获得 
更好的代码优化和性能。 

在木书中， EnumerateFonts 之前所有项 y 的 Solution Platforms 均 M 示五个选项： 

• Any CPU 

• ARM 
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• x64 

• x86 

• Configuration Manager 

在本 -tS 中 ， EnumerateFonts 之前的所有项 , Solution Platforms Kl_ 能 l_i 经为了 C # 项 U 
显示了默认选项，即 AnyCPU 。 

本来就应该是这样。在 Visual Studio 中编译 C# 程序时，源代码编译成中间语言 
(Intermediate Language 或称 IL) 。 在程序运行时， IL 编译成适合相应处理器的原生代码。这 
是使用 C# 类似托管语言的一大 优势： 分布式可执行文件由独立于相应处理器的中间语言组 
成。即使程序使用 P/Invoke 来访问 Win32 函数也这样。 

通过 C# 项 IJ, 可以使用 Solution Platforms 组合框切换到 ARM 、 x64 或 x86 平台。编 
译器仍然会产生中间语言，但可执行文件只能在特定处理器上运行。如果指定 ARM , 程序 
只能在用 ARM 处现器的机器 L 运行。如果指定 X64, 程序只能在 64 位 Intel 处理器上运行。 
如果指定 X86, 程序可以在 32 位和 64 位 Intel 处理器 h 运行。 

— 般情况下，都 + 想限制 C# 程序在特定处理器 h 运行，除非心须这样做。你想让 
Solution Platforms 读取 Any CPU 。 （如果想让程序在 Intel 和 ARM 处理器中有一些不同，叫 
以使用本章前面介绍的 GetNativeSystemlnfo 函数。） 

然而，一旦 C++ 代码开始引入应用，一切都会发生改变 。 Visual Studio 不会把 OH ■代 
码编译成中间语言，而是将其编淬为特定处理器的原生机器代码。可执行文件只在该类处 
理器上运行，为 32 位 Intel 处理器编译的代码也在 64 位 Intel 处理器上运行。 

此外，如果有一个多项目应用包括 C# 代码和 C++ 代码 ( 如 EnumerateFonts 解决方案)， 
则多个项目的平台必须相同，并且必须匹配运行应用的平台。至于 AnyCPU, C# 项 Lj 似乎 
可以引用 X64C++ 项 H, 但事实并非如此。 

要查看单个项 fcl 的平台，可以从任一组合框中选择 Configuration Manager 并启用 
Configuration Manager 对话框。对于该解决方案中的 C# 项目，有以 卜平台 选项： 

• Any CPU 

• ARM 

• x64 

• x86 

而对于 C++ 项 tl, 则有以下平台 选项： 

• ARM 

• Win32 

• x64 

C++ Win32 平台选项等同于 C# x86 平台。 

平台选项唯一可能的组合分别 如下： 

• 在 ARM 处理器上运行的 C# ARM 和 C++ARM 

• 在 Intel 64 位处理器上运行的的 C# x64 和 C++ x64 

• 在 Intel 32 位或 64 位处理器卜 . 运行的 C# x86 和 C++ Win32 

如果从 Solution Platforms 组合框中选择 ARM 、 X64 、 X86 或 # Win32 , 就会得到以上 
三种组合之一。 
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对于本1?的任何程序，试一试从 Solution Platforms 组合框中选择 ARM , 然后按功能键 
F 5。 没有在基于 ARM 的设备上运行 Visual Studio , 因此项目生成成功，但不会进行部署， 
因为 Visual Studio 并没有在 ARM 处理器上运行。 

如果在基于 ARM 的机器上运行 Windows 8( 比如微软 Surface 初始版本)则可能要在该 
设备上测试程序。+能在 Surface I 〔运行 Visual Studio ， 因此必须通过另一种方式在 Surface 
上运行应用。 

为了调试和测试，最简单的方式就是远程部署，吋以通过 Win N 络进行，详情吋参见 
Tim Heuer 的一篇博客文章 http :// timheuer . com / blog / archive /2012/10/26/ remote - debugging - 
windows - store - apps - on - surface - arm - devices . aspx 。 一旦设置好 ， Surface 就运行远程调试器， 
也+是休眠或显氺锁屏状态，做出以 K 两个 选择： 

• 从 Solution Platform 组合框逸择远程机器平台 

• 从 Solution Platform 组合框左侧的下拉列表选择 Remote Machine 

因为目标机器与平台相关，因此按以上顺序选择两项会有用。如果先选择 Remote 
Machine , 再选择平台 ， Visual Studio 就会切换到本地计算机。 

如果解决方案只包括 C # 代码 ， Solution Platform 组合框则应该为 Any CPU , 即不考虑 
要部署的机器。如果解决方案有一些 C ++ 代码并要部署到基于 ARM 的设备(比如微软 
Surface ), 则应该从 Solution Platform 组合框选择 ARM 。 

对于分布式，无论是上传应用到 Windows Store , 还是把程序部署到其他机器，都要涉 
及另一种方法。 需耍 通过从 Store 菜中.中选杼 Create App Packages . 并在 Visual Studio 中创 
建应用包。 

在此过程中，你会看到标题为 Select and Configure Packages 架构表的对话框。如果项 
0只有 C # 代码，可以选择 Neutral 架构， 等同丁 -Any CPU 。 然而，如果项目有 C ++ 代码， 
则不能选择 Neutral 。 必须选择一个或多个其他 选项： x 64、 x 86 和 ARM 。 你可能要选择全 
部三项，以便部署到任何类型的机器上。 

如果斗^ Windows Store 上传程序包，而是要安装到另一台汁算机 l _., Visual Studio 就 
会为你选的各种架构牛成 Id 录。毎个 hi 录都包含 Windows PowerShell 脚木(扩展名为 psl 的 
文件) nj •以运行用来部署应用。一个方法是把@录复制到 U 盘(或者 It Visual Studio 创 建)， 
将 U 盘插到其他机器(如微软 Surface ) ]：, 然后运行脚本在这台机器上安装应用。 

15.7 解读字型规格 

字型规格指特定字型的字符和字符串大小。在大多数情况下，处理 Windows 8程序中 
的文木往往不耑要字型规格信息。 TextBlock 元素决定特定文本及宁艰大小，通常这就够/。 
然而，如果你打算进行复杂文木布局，则有必要有字型规格，冇一些小常见任务偶尔会要 
求字型规格。 

我要把讨论限定于垂直规格，讨论卨度而非宽度。垂直规格随字型、字咽风格(斜体)、 
字型粗细(粗 体) 和字甩大小而变化，但又独立于任何特定字符或字符串。 

LookAtFontMetrics 程序以可视化方式演示了 TextBlock 元素汁 算所捋文本字符串的大 
小和 Direct Write 所提供字型规格之间的关系。该项14和 EnumerateFonts 一样都引用了 




DirectX Wrapper 项 tl «>X AML 文件不仅有相似 ListBox , 在 Border 中还包括一些半定义 Line 
元素的 TextBlocko 


1: LookAtf 
:id Backgr 


<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush} M > 
<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" 

<ColumnDefinition Width-" •” /> 

〈 /Grid.ColumnDefinitions 〉 


<ListBox Name="lstbox" 

Grid.Column="0" 

Width-"300" 

SelectionChanged="OnListBoxSelectionChc 
<ListBox.ItemTemplate> 

<DataTemplate> 

<TextBlock Text= M (Binding) M 

FontFamily="1 Binding) r 
FontSize="24" /> 

</DataTemplate> 

</ListBox.ItemTemplate> 

</ListBox> 


lignment="C 


Horizonta1A1ignment=.'Center 
VerticalAlignment="Center n > 
<Border BorderBrush= M (J 
BorderThickness 
<Grid> 



<Line x 
<Line x 
<Line x 
<Line x 


■"capsHeightLine" /> 
= M xHeightLine" /> 
-"baselineLine" Stroke: 
="descenderLine M /> 
="lineGapLine" /> 


</Grid> 

</Border> 

</Grid> 

</Grid> 


程序的构造函数和之前的程序非常相似，两者都用吋用字型填充 ListBox 。 程序还设置 
了 TextBlock 的 FontFamily 属性并从 DirectXWrapper 获取 WriteFontMetrics 值来处理 ListBox 
中的 SelectionChanged 事件。程序使用这些字甩规格来设腎不同 Line 元素的 Y 1 和 Y 2 属性。 

项 LookAtFontMetrics I 文件 ： MainPage .xam! .cs ( 片 段） 
public sealed partial class MainPage : Page 



WriteFontCollection writeFontCollection; 


public MainPage() 
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DirectWrite 中的 DWRlTE _ FONT_METRlCS 有一个字段名为 designUnitsPerEm , 大多 
数字甩都有一个不错的约牿数值，比如256、1024、2048或4096,只不过偶尔会出现1000 
这样的独特值。汜如其名，它表氺用 r 定义7-型特点的 M 格 高度。 结构中的所有其他 岛度 
邡是相对 r 该设 il •高 度的。 这就是为什么该结构所有段都是整数的原1利。力了能够获得 
特定字甩和字甩大小的像袭高值，这种结构的字段必须乘以 FontSize 再被 
designUnitsPerEm 除。 

这就是 LookAtFontMetrics 程序在设置所有 Line 元素的 Y 1 和 Y 2 厲性时 所做的事情。 
对 P —些字型，结果肴起來显示不完全正确，因为这些字型主要用于非拉丁字母。但对用 
T 拉丁字母语 n 的标准字型，报据字型规格汁算所得的线条十分精确，如卜阁所示。 



Texting 


字符在其之 I :的线条(即蓝色线条，如果你正在阅读本书的电子版)为基线。在很多字 
哦中，圆形字符(如 “ e ”） 会超过基线卜'方一点点。从基线往上到下一条线为 X - 卨度线， 
也就是小写字母的卨度。同样.一些圆体字符略卨于 X - 高度线。接 F 来是大写尚度线， 
表明大写宁 -母岛 度。 I •.行卨度线甚罕史高(在 TextBlock 自身汁算所得的矩形最 顶端) 并且 
农明一些字母 " j 能出 现的变音符，如允音变择(0)。低丁-基线的区域用于有些字母会下降 
到接线之下。敁底层有一间距，对于许多字甩而言都是零。 K 图使用了原始 
DWRITE _ FONT_M ETRICS 结构所定义的名称。 



Texting 卜 - 


TextBlock 汁算自 身的高度是基丁_ ascent 、 descent 和 lineGap 字段的总和。 
第10章展心•过•个程序， 用丁 - M 水文木字符串的倾斜刚影(见卜图)。 
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我当时说过，小可能像这样将任意字型做成叨影从基线向后倾斜的效果。你需要知道 
字型规格，而现在来试 一试。 

以下是 BaselineTiltedShadow 的 XAML 文件。它有另一个用于系统字型的 ListBox , 还 
有一些文字和阴影。 

项 H: BaselineTiltedShadow | 文件： MainPage.xaml ( 片段 | 

〈Grid Background。"IStaticResource ApplicationPageBackgroundThemeBrush)"> 

<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width=”Auto" /> 

<ColumnDefinition Width:***" /> 

</Grid.ColumnDefinitions> 



<ListBox.ItemTemplate> 
<DataTemplate> 

<TextBlock Text="(Binding) 


FontFamily-"IBinding} 
FontSize="24" /> 



HorizontalAlignment= M Center" 

VerticalAlignment=-"Center"> 


="shadowTextBlock" 








</Grid> 

</Grid> 

两个 TextBlock 元素都缺少 fontFamily 属性，从代码隐藏文件中设 S 为 ListBox 中所选 
择的字甩。阴影部分的 TextBlock 也缺少 RenderTransformOrigin 属性。 初始化 ListBox 的 
代码隐藏文件的构造函数和之前程序的 一样： SelectionChanged 属性的重要部分根据基线以 
上字甩高度部分的比例来计算用于阴影的 RenderTransformOrigin 。 


项 BaselineTiltedShadow | 文件： MainPage.xaml.cs 《片段 > 



if (fontFamily — null) 
return; 


foregroundTextBlock.FontFamily ■ new FontFamily(fontFamily); 
shadowTextBlock.FontFamily = foregroundTextBlock.FontFamily; 



double fractionAboveBaseline - (double)fontMetrics.Ascent / 

(fontMetrics.Ascent + fontMetrics.Descent + fontMetrics.LineGap); 


结果如下图所示。 








662 


Windows 程序设计(第 6 版> 


15.8 用 SurfacelmageSource 绘画 

DirectXWrapper 另外还有一个类。我称之为 SurfacelmageSourceRenderer , 它在结构上 
不同封装 DirectWrite 类的库中其他的类。 SurfacelmageSourceRenderer 类实例化所有 
DirectX 对 象并用 来提供高层次接口 . 以在 SurfacelmageSource 类型的对象 h 绘制线条。 

SurfacelmageSource 派牛 .fj ImageSource. 因此 町 以设 ’ft 1 力 Image 的 Source M 性或设 K 
为 ImageBrush 的 ImageSource 属性 。 SurfacelmageSourceRenderer 械木 I: 是位图。似是 ， ll J 
以使用 DirectX 在该位图上绘制图形 ( 或文字 ) -SurfacelmageSourceRenderer 类执行所有必耍 
系统开销，并公开三个公共 方法： Clear 、 DravvLine 和 Update 。 很明 S ， 该类可以进一步扩 
展，包括更多东四。 

以下为头文件。 

项 H: DirectXWrapper | 文件： SurfacelmageSourceRenderer.h 

簪 pragma once 


namespace DirectXWrapper 

l 

public ref class SurfacelmageSourceRenderer sealed 


private: 


height; 


rosoft: : WRL: : ComPtr<ID2DlFactory> pFactory; 

Microsoft: : WRL: : ComPtr<ID3DllDevice> pd3dDevice; 

Microsoft: : WRL: : ComPtr<ID3DllDeviceContext> pd3dContext; 

Microsoft: : WRL: : ComPtr<ISurfaceImageSourceNative> sisNative; 
Microsoft: : WRL: : ComPtr<IDXGIDevice> pDxgiDevice; 

Microsoft: : WRL: : ComPtr<ID2DlBicmapRenderTarget> bitmapRenderTarget; 
Microsoft: : WRL: : ComPtr<ID2DlBitinap> bitmap; 

Microsoft: : WRL: : ComPtr<ID2DlSolidColorBrush> solidColorBrush; 


Microsoft: : WRL: : ComPtr<ID2DlStrokeStyle> strokeStyle; 
bool needsUpdate; 


public: 

SurfacelmageSourceRenderer( 

Windows :: UI::Xaml: : Media::Imaging: : SurfacelmageSource*' SurfacelmageSource, 
int width, int height); 
void Clear(Windows::UI :: Color color); 

void DrawLine(Windows :: Foundation :: Point ptl, Windows :: Foundation :: Point pt2, 
Windows :: UI::Color color, double thickness); 

void Update(); 



ID2DlRenderTarget * CreateRenderTarget (Microsoft: : WRL: : ComPtr<IDXGISurface 〉 pSurface); 
D2D1 :: ColorF ConvertColor(Windows :: UI::Color color); 


公共构造函数要求有一个 SurfacelmageSource 类的实例。这在公共构造函数中是允 I 午 
的，因为它是在 Windows.UI.Xaml.Media.Imaging 命名空间中定义的 Windows Runtime 类印。 
该构造函数包含非 DirectX 专家也能从头写出来的代码。我 Ci 然是写 + 出来的，因此，我 
从其他样例项 H 中提取大部分代码來说明如何使用 SurfacelmageSourceo 

项 R: DirectXWrapper I 文件： SurfacelmageSourceRenderer.cpp (iV©) 

SurfacelmageSourceRenderer :: SurfacelmageSourceRenderer(SurfacelmageSource^surfacelmageSource, 

int width, int height) 




DJD 一 FEATURE—LfcVtL 一 i 
D3D~FEATURE_LEVEL_ 11_0, 
D3D 二 FEATURE 一 LEVEL_10_1, 
D3D:FEATURE:LEVEL:10 二 0, 
D3D~FEATURE_LEVEL_9_3 r 
D3D~FEATURE~LEVEL_9_2 # 
D3D 二 FEATURE:LEVEL:9:1, 


hr = D3DllCreateDevice (nullptr, 

D3D__DRI VER_TYPE_HARDWARE, 


0 , 


D3D11 一 CREATE 一 DEVICE 一 SINGLETHREADED 
D3D1l_CREATE_DEVICE_BGRA_SUPPORT, 


featuceLevels, 

ARRAYSIZE(featureLevels), 


D3D11_SDK_VERSI0N, 

&pd3dDevice, 

nullptr. 



if (!SUCCEEDED(hr)) 

throw ref new CCMException(hr); 


// Get DXGIDevice 

hr = pd3dDevice.As(&pDxgiDevice); 









该构造函数使用了在绘画操作时发挥作用的一个私有方法。该方法在实际绘的画地方 
创建 lD2DIRenderTarget 类型的对象。 



D2D1—RENDER 一 TARGET 一 PROPERTIES properties = 
i 

D2 D1_RENDER_TARGET_TYPE_DEFAULT, 
format. 



D2D1_RENDER_TARGET_USAGE_N0NE, 
D2D1_FEATURE_LEVEL~DEFAULT 


ID2DlRenderTarget * pRenderTarget; 

HRESULT hr = pFactory->CreateDxgiSurfaceRenderTarget(pSurface.Get(), 





请注意，在构造函数和该方法中，我定义了两个指针指向 


c 对象(命名为 








第 15 章原生 


665 


dxgiSurface 和 pRenderTarget) ， 而没有使用 ComPtr 封装器。这是闵为我只在很短时间内使 
用这些对象，然后就通过调用 Release 方法手动释放。 

Clear 方法主要调用存储为字段的 ID2DlBitmapRenderTarget 对象的 Clear 方法。 

项 H: DirectXWrapper | 文件： SurfacelmageSourceRenderer.cpp ( 片 段） 
void SurfacelmageSourceRenderer :: Clear(Color color) 

{ 

bitmapRenderTarget->BeginDraw(); 
bitmapRenderTarget->Clear(ConvertColor(color)); 
bitmapRenderTarget->EndDraw(); 
needsUpdate = true; 

) 

Clear 是公共方法，而且参数必须为 Windows Runtime 类型，因此也正是如此。然而， 
Windows Runtime 所定义的 Color 结构和 DirectX 中的各种颜色结构并不相同，也就是说， 
颜色必须通过以卜私冇方法进行转化。 

项 DirectXWrapper | 文件： SurfacelmageSourceRenderer.cpp ( 片段 > 

D2D1 :: ColorF SurfacelmageSourceRenderer :: ConvertColor(Color color) 

D2D1: : ColorF colorf(color.R / 255.Of, 
color.G / 255.Of, 
color.B / 255.0f r 
color.A / 255.Of); 

return colorf; 

1 

点也必须进行转换。我已经定义的公共 DrawLine 方法会渲染两点之间的线条，但该方 
法会首先把这些 Windows Runtime Point 值转换成 DirectX D2Dl_POINT_2F 值，再传递给 
ID2D1 BitmapRenderTarget 对象的 DrawLine 方法。 

项 R: DirectXWrapper I 文件 ： SurfacelmageSourceRenderer .cpp ( 片段） 
void SurfacelmageSourceRenderer: : DrawLine(Point pointl, Point point2. 

Color color, double thickness) 

i 

// Convert the points 

D2D1_P0INT_2F ptl = { (float)pointl.X, (float)pointl.Y ); 

D2D1_P0INT_2F pt2 = { (float)point2.X, (£loat)point2.Y ); 

// Convert the color for the SolidColorBrush 
solidColorBrush->SetColor(ConvertColor(color)); 

// Draw the line 
bitmapRenderTarget->BeginDraw(); 

bitmapRenderTarget->DrawLine(ptl, pt2, solidColorBrush.Get(), 



strokeStyle.Get()); 


bitmapRenderTarget->EndDraw(); 
needsUpdate = true; 

} 

记然， 〖 D2DlBitmapRenderTarget 接口还定义了除 DrawLine 之外的许多其他方法，但 
如果你要在应用中大 ® 运用这些方法，则更应该至少把应用的一部分移植成 C ++。 

Clear 和 DrawLine 在 ID2D1 BitmapRenderTarget 上进行绘画，而 SurfacelmageSource 
对象必须从 ID2D1 BitmapRenderTarget h 进行更新。而这发生在 Update 方法中。 

项 R: DirectXWrapper | 文件： SurfacelmageSourceRenderer.cpp ( 片 段〉 
void SurfacelmageSourceRenderer: : Update() 


// Check if needs update 



if (!needsUpdate) 
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needsUpdate = false; 

// Begin drawing 

RECT update = { 0 # 0, width, height }; 
POINT offset; 



HRESULT hr = sisNative->BeginDraw(updace, &dxgiSurface, &offset); 



ID2D1RenderTarget * renderTarget - CreateRenderTarget(dxgiSurface); 



// Draw the bitmap to the surface 

D2D1_RECT_F rect = { 0, 0, (float)width, (float)height J; 
renderTarget->DrawBitmap(bitmap.Get(), Srect); 


// End drawing 
renderTarget->EndDraw(); 
sisNative->EndDraw(); 



SurfacelmageSourceRenderer 源代码也就这么多。 SpinPaint 项 11 还演示了该类。这个程 
序显示一个旋转磁盘 ( 见卜 图 ) ， 吋以在屏輅 L: 按住或移动手指就 "J* 以在磁盘上进行绘⑽ i 。 但 
所 M 的东 W 还会作为镜像冉次，这样一来，便用最少的精力就创建了一个冇趣的模式。 



我写过第 • 一个 SpinPaint 版木，用于咖啡巢大小的电脑，现在称为 Microsoft Pixel Sense 。 
我使用 WriteableBitmap 把程序移植到 Silverlight, 又使用 XNA 把程序移植到 Windows 
Phone 7 。 

{i ： Windows 8 版木的 SpinPaint 中， XAML 文 件定义 f - 个名为 referencePanel 的 Grid, 
位丁 •页 面中心 。在 Loaded #件中， Grid 有和 SurfacelmageSource 尺寸相问的 矩形， 
SurfacelmageSource 也是 itl Grid 1:. 成。 在该 Grid 中，有另一个名为 rotatingPanel 的(顾名思 






义 ) 旋转 Grid 。 Grid 内部包念，竹 K 底纹， M/ 卽 : 之咖 _ 好的东叫史加叫 W 。 Grid 最顶部 
是 Image 元素，用 T* 显 $ SurfacelmageSource 位图和剪切圈。 

项目 ： SpinPaint | 文件： MainPage.xaml ( 片段） 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Grid Name= M referencePanel" 

Margin*"24" 

HorizontalAlignraent="Center" 

VerticalAlignment="Center"> 

<Grid Naine="rotatingPanel"> 

<Grid.RenderTransform> 

<RotateTransform x : Name="rotate" /> 

</Grid.RenderTransform> 

<Ellipse> 

<Ellipse.Fill> 



<GradientStop Offset="0" Color= M Black" /> 
<GradientStop Offset-"1" Color="White" /> 



</Ellipse.Fill> 



<Image Name="image" 

Stretch= M None H /> 

<!— Cover all but a circle (poor man's clipping)--> 

<Path Fill="{StaticResource ApplicationPageBackgroundThemeBrush) 
Stretch= n Uniform n > 

<Path.Data> 



<RectangleGeometry Rect«"0 0 100 100" /> 

<EllipseGeometry Center*"50 50" RadiusX="50" RadiusY="50" /> 
</GeometryGroup> 

</Path.Data> 

</Path> 

</Grid> 

</Grid> 

<TextBlock x : Name*"pageTitie" 



Margin="24"> 
<TextBlock.Foreground 〉 
<SolidColorBrush /> 
</TextBlock.Foreground 〉 



<Button Content="clear" 

HorizontalAlignment="Right" 

VerticalAlignment="Bottom" 

FontSize= M 48 M 


Margin="24 , * 



</Grid> 

Loaded 处理程序雄 7 1 屏幕尺、 j • 和视图状态来决定适合 SurfacelmageSource 对象的尺 
、J 0 Loaded 处理程序还从 DirectX Wrapper 库创建 SurfacelmageSourceRenderer 。 


项 R: SpinPaint | 义件： MainPage.xaml.es ( 片段） 
public sealed 
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SurfacelmageSource surfacelmageSource = new SurfacelmageSource (dirension, dimension); 
surfacelmageSourceRenderer = new SurfaceImageSourceRenderer(surfaceImageSource, 



Clear 按钮 . 良 接创建预定尺十的新 SurfacelmageSource 和 SurfacelmageSourceRenderero 
类似 f FingerPaint 系列程序，也可以用多个手指在 SpinPaint h 绘画。然而，从概念上 
来说是在在一个旋转磁盘上绘 _, 可以把手指保持在屏幕上并进行喷绘。换句话说，手指 
+ 动或+产生任何 PointerMoved 事件的怙况下，仍然可以绘 fflj ! 

这就要求一个稍微+同的方法来处理 Pointer 事件。当然，仍然要维护字典，而其包含 
的 Fingerlnfo 值有 LastPosition 和 ThisPosition 字段。然而，在 OnPointerPressed 覆写中， 













LastPosition 初始化为无穷大坐标，而在 OnPointerPressed 和 OnPointerMoved 中 ， ThisPosition 
字段设置为当前手指位 H 。 除了 LastPosition 字段初始化以外，这些覆写不会把该字段设置 
其他东西。 

项 H: SpinPaint | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
{ 

class Fingerlnfo 

( 

public Point LastPosition; 
public Point ThisPosition; 


Fingerlnfo 〉 


=new Dictionary<uint, FingerInfo>(); 


protected override void OnPointerPressed(PointerRoutedEventArgs args) 

i 

uint id = args.Pointer.PointerId; 

Point pt - args.GetCurrentPoint(referencePanel).Position; 
if (fingerTouches.ContainsKey(id)) 
fingerTouches.Remove(id); 

Fingerlnfo fingerlnfo = new Fingerlnfo 


new Fingerlnfo 


LastPosition = new Point(Double.E 
ThisPosition = pt 

}； 

fingerTouches.Add(id, fingerlnfo); 
CapturePointer(args.Pointer); 
base.OnPointerPressed(args); 


y. Double. E 


protected override void OnPointerMoved(PointerRoutedEventArgs args) 


uint id = args.Pointer.PointerId; 

Point pt = args.GetCurrentPoint(referenc€ 
if (fingerTouches.ContainsKey(id)) 

fingerTouches 【 id】.ThisPosition ■ pt; 
base.OnPointerMoved(args); 


). Position; 


protected override void OnPointerReleased(PointerRoutedEventArgs args) 
1 

uint id = args.Pointer.PointerId; 

Point pt = args.GetCurrentPoint(referencePanel).Position; 
if (fingerTouches.ContainsKey(id)) 

fingerTouches[id].ThisPosition - pt; 
base.OnPointerMoved(args); 


protected override void OnPointerReleased(PointerRoutedEventArgs args) 

( 

uint id = args.Pointer.Pointerld; 
if (fingerTouches.ContainsKey(id)) 
fingerTouches.Remove(id); 
base.OnPointerReleased(args); 


protected override void OnPointerCaptureLost(PointerRoutedEventArgs args) 

I 

uint id = args.Pointer.PointerId; 
if (fingerTouches.ContainsKey(id)) 
fingerTouches.Remove(id); 
base.OnPointerCaptureLost(args); 


所有真正柯趣的事情是发生在 CompositionTarget.Rendering 事件处理程 序中。 根据应 
用当前运行时长可以计算旋转角度来旋转名为 rotatingPanel 的 Grid, 并用于计算喷绘 颜色。 
该颜色也应用到在页左 h 角 M 示应用名称的 TextBlock, 


项目 ： SpinPaint 丨义件： MainPage.xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 
{ 

void OnCompositionTargetRendering(object sene 

{ 

// Get elapsed seconds since app began 
TimeSpan timeSpan = (args as RenderingE\ 
double seconds = timeSpan.TotalSeconds; 

// Calculate rotation angle 

rotate.Angle = (360 * seconds / 5) % 36C 


object args) 


) •RenderingTime; 


double fraction 


(seconds % 10) 


(fraction < 1) 

clr = Color.FromArgb(255, 255, (byte)(fraction 


else if (fractioi 
clr = Color. 
else if (fractio: 

clr = Color, 
else if (fractio: 
clr = Color. 


FromArgb(255 
n < 3) 

FromArgb(255 
r» < 4) 

FromArgb(255 
n < 5) 

FromArgb(255 
FromArgb(255 


(pageTitle.E 


if nobody' 


0, (byte) 


- (fraction - 


((fraction - 


- (fraction - 


255), 255, 0); 


255), 255); 


(byte)((fraction - 


255>, 0, 255); 


〕， (byte)(255 - (fraction - 


dColorBrush).Color 


对于正在触摸屏蘇的每个手指，都会通过旋转 Fingerlnfo 的 ThisPosition •段，该点+ 
再处在屏幕平.标系中，而是相对于旋转后的 Image 元素。用于绘 W 的正是该点和 Fingerlnfo 
的 LastPosition 字段。四次调用 SurfacelmageSourceRenderer 的 DrawLine 方法会在四张位图 
的象限中绘制四 条中独的线： 

项月 ： SpinPaint | 文件： MainPage.xaml.es ( 片 段 } 
public sealed partial class MainPage : Page 


void OnCompositionTargetRendering(object 


z, object args) 


bitmapNeedsUpdate 


fingerlnfo in fingerTouches.Values) 


// Find point relative t 
inverseRotate.Angle = -r 


bitmap 







也正是该旋转手指的位置被作为 LastPosition 存储回到 Fingerlnfo 对象。不动手指也可 
以绘 Hi, 过程如 K: 即使手指没有移动， OnPointerPressed 重写也可以得到手指当前位贾并 
且一育存储在 Fingerlnfo 的 ThisPosition 字段中。在每次调用 CompositionTarget.Rendering 
期间，就会用一个新角度旋转 ThisPosition 字段，并且从 LastPosition 字段绘制线条。转动 
位資的值作为 LastPosition 存储回 Fingerlnfo ， 用丁 • 准备卜 ' 一次迭代。 

有趣的是，我第一次考虑 Micorsoft PixelSense 的 SpinPaint 程序的时候，如果用静态 
Contacts 类，即使不处理任何触摸事件也可以获得所有触換屏幕的手指当前位置。我可以 
把子 • 指触換处现状态而不是处理为 1 JI 件，因此，处现 CompositionTarget.Rendering 处理程 
序的中的手指事件显得很自然。 

如果把 SpinPaint 程序移植到只有处理触摸 # 件的环境中，我得模仿 Contact 类的触摸 
状态。 Fingerlnfo 的 ThisPosition 字段精确 如下： 在任何时候，字典中的 Fingerlnfo 对象都 
表示屏幕 h 所有手指的当前位置。但如果没有将触模处理为状态而不是事件的环境，我不 
确定自己会这么考虑 SpinPaint 程序。 

这让我吏相信懂得得越多，就越能跳出固有思维。 



第 16 章富文本 

“富文木”这个术语鬯指通过不同字哦、大小和风格来显示文本，但现在，这些特征 
都很常见，富文本的含义就显得比较模糊，指不同寻常 的东两 。本章大部分内容集中在 
RichTextBlock 元素和 RichEditBox 控件，两者(正如 其名) 是 TextBlock 和 TextBox 的增强版。 
不过，本章还会强调一些注意事项，以帮助处理更广泛的文本处理任务。 

围绕字型的专业术语已经随着数字印刷的转换而有所改变。“字体” （ typeface ) —词在 
传统 h 表示字符字形的特 定设计 风格。常见字体是 Times New Roman 和 Helvetica 。 这些 
字 体设计 经常有变体,最常见的是斜体 ( italic ) 和杻体 ( boldface ), 因此,字体家族会包括 Times 
New Roman、Times New Roman Italic 和 Times New Roman Bold 。 

字型 ( font ) 是用特定风格对特定字体的具体 实现： 例如，在数字印刷术之前，10 fr >5 的 
Helvetica Bold 。 在过去，特定字型中的毎个字符都是一个金属制的活字。 

随着人们开始用 II •算机处理文本，有两个趋势导致这些术语变得日益模糊。首先，用 
户首先把斜体或粗体当成字体的 M 性，而+是其本性。例如，从 Times New Roman 到 Times 
New Roman Italic , 不是要改变特定字，而把 Italic 属性应用到文字上更方便，也不; T 要考 
虑基本字形。其次，随着数7-轮廓字型技术的出现，例如 TrueType , 字型字符的大小变成 
了非常简单的缩放过程，因此，人们不再认为大小是构成字型规范的重要组成部分。 

为了帮助满足这种+同思维方式，术语“字型家族 ” （font family ) 开始普遍使用。字型 
库很像传统字体。有睹如 Times New Roman 或 Helvetica 的名称。字型库在 Windows Runtime 
中用 fontFamily 类和 TextBlock 以及 Control 类的 fontFamily 属件进行实现 。对 个完整 
字型规范 ， Windows 8程序结合其他字型相关属性 (( FontSize 、 FontStyle , FontWeight 和 
FontStretch > 来使用 fontFamily 。 

然而，底层技术则采用比较传统的方法。在 Windows 中，字型采用字型文件来实现， 
扩展名通常为 . TTF ( **TrueType font " )» 可以在 / Windows / Fonts 目录找到这些文件。许多这 
些文件可能随 Windows —起安装；而其他一些则可能通过各种应用添加到集合中 。 Windows 
Explorer 管理该 H 录的方式和传统 H 录有一些区别，因此无法直接看到文件名。（该 H 录中 
还有特定大小的位图字型，但用于命令行窗口。） 

在 / Windows/Fonts U 录中 M 示的是字甩家族名，不是文件名，比如下图所示的 Georgia 。 


Abg 

Georgia 

请注意.它看匕去像是若 T •个文档文件。如果双击，就会看到卜图，在另一个窗口中 
显承字甩家族成员的中.个字型文件。 



u 


幸富文本 


Abg Abg Abg Abg 

Georgia Bold Georgia Bold Georgia Italic Georgia Regular 

Italic 

如果用鼠标右键黾击其中一个，随后弹出属性窗口，会发现每个都是一个单独文件， 
依次为 georgiab . ttf 、 georgiaz . ttf 、 georgiai . ttf 和 georgia . ttf 。 每个文件都包含对很多字符的可 
缩放轮廓，并不是所有 Unicode 字符，而是较大的字符集。 

有些字型家族不仅仅包含 Italic III Bold 变体，例如，还有 Oblique , Light 或 Demibold , 
有些字啦家族包含 Compressed 或 Expanded 变体。如果指定 FontStyle 、 FontWeight 和 
FontStretch 属性的特定组合， Windows 就会引用一个合适的字型文件。 

有些字型家族不包含 Italic 和 Bold 变体。这些字艰家族是可以模拟的，即把字符向右 
倾斜或让字符笔 W 变宽一点。 

16.1 专用字体 

Windows Store app 可以使用 / Windows/Fonts U 录下 的任何空心字 喂，但正如第15章所 
讨论的，需要 DirectWrite 来实际枚举可用字库。 

有时，程序需要使用没有安装在 Windows 中的字型。一种传统解决方案是随应用提供 
字体并让用户安装，但在某呰情况下，程序可能需要字体是专用的。这些字型•能匕经巾 
字型厂商授权严格用于该特定应用。在这种情况下，字型应该保持为该应用专用。 

在这种情况 h 这些专用字甩文件可以处理为应用内容并有效嵌入坷执行应用。 
PrivateFonts 项 tl 演示了如何做到这 一点。 我为该项 U 创建了一个名为 Fonts 的文件夹，并 
添加8个 TrueType 文件，如下图所示。 



> •*■ References 

> &i Assets 

> fii Common 
* Fonts 



每一个字型文件都有其 Build Action , 并设置为 Content 的默认值。 
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如果要在 Visual Studio 中创建这种程序给其他人运行，则+能 ft 接把任意字型文件添 
加到项目。由于这些字型文件会作为应用的一部分发行给用户，所以你必须有权限。对于 
很多字型文件，包括随 Windows 和 Windows 应用一起的很多字型，随应用发行 T •甩文件 
要求从字 m 商诀取发行许吋。 

然而，我加到 PrivateFonts 项 H 中的特定字型文件并没有这种限制。如果你是 XNA 程 
序员，可能认得出这些字哦文件，微软已经从 Ascender Corporation 获得许可，可以将其随 
应用一起发行。 

XAML 文件中的 TextBIock 元索可以访问这些字型，与 fontFamily 域性 的格式略有不 
同。通常情况 F , 町以把 fontFamily 设置为字哦家族名，比如 Times New Roman 或 Segoe Ul 。 
要使用专用字体，必须指定表冶字型文件位 S 的 URI , 后面跟上哈希(或 数字) 标符，再跟 h 
字艰家族名称，如下所示。 

项 H: PrivateFonts | 文件： MainPage.xaml 《片段 > 

<Page ... FontSize="36"> 

<Grid Background= w {StaticResource ApplicacionPageBackgroundThemeBrush)"> 

<Grid.ColumnDefinitions> 

<ColumnDefinition Width-"*" /> 

<ColumnDefinition Width="*" /> 

<ColumnDefinition Width*"*" /> 

<ColumnDefinition Width="* M /> 

〈 /Grid•ColumnDefinitions> 

<StackPanel Grid.Column="0"> 

<TextBlock Text="Kootenay" 

FontFamily="ms-appx : ///Fonts/Kooten.ttf#Kootenay" /> 


FontFamily= 


<:///Fonts/Linds.t 


<TextBlock Text*"Miramonte M 

FontFamily="ms-appx : ///Fonts/Miramo.ttf#Miramonte" /> 

〈TextBIock Text="Miramonte Bold" 

FontFamily="ms-appx:///Fonts/Miramob.ttf#Miramonte" /> 

<TextBlock Text="Pericles" 


Text-"Pericles Light" 
FontFamily="ms-appx:///Fonts/Pericl.t 

Text="Pescadero" 

FontFamily="ms-appx : ///Fonts/Pesca.tt 


<TextBlock 


FontFamily="ms-appx:///Fonts/Pescab.ttf#Pescadero' 

<TextBlock Text="Pescadero Bold*" 

FontFamily="ms-appx:///Fonts/Pesca.ttf#Pescadero" 
Font:Weight= M Bold" /> 

<TextBlock Text*"Pescadero Italic*" 

FontFamily="ms-appx:///Fonts/Pesca.ttfIPescadero" 
FontStyle="Italic" /> 


</Page> 


FontFamily 字符串包括用丁•引用应用文件嵌入内容的 MS - APPX 前缀，活跟 Fonts 文件 




夹以及 Fonts 文件夹中的文 件名。 以下是 Kooten . ttf 文件的 URI ： 

ms-appx:///Fonts/Kooten.ttf 

移除 MS - APPX :/// 前缀也可以。 

该 URI 之后是一个哈希符号和在这个字体文件中字体的字库 名称： 
FontFamily =" ms - appx :/// Fonts / Kooten . ttf # Kootenay"o 

该字型家族名+是文件名(但可以是)。为了获得没有存储在 / Windmvs/Fonts H 录下的任 
总 TrueType '? 型文件的字型家族名称，可以在 Windows Explorer 中右键 单击字 型文件，然 
后从弹 lli 的快捷菜单中选择 Properties 或 Preview 。 

Miramo . ttf 文件是 Miramonte 的符通版：粗体版在 Miramob . ttf 文 件中。 请注意，在这 
两种情况下，标记中所指定字型家族名是 Miramonte 。 如果 Windows 安装了这两种字型文 
件，则可以把 fontFamily 设置为 Miramonte , 以此来引用其中的一种字型，还能把 
FontWeight 设置为 Bold 而得到粗体版本。如果使用包含字型文件的语法，字型家族名相 
同，不需要设背 FontWeight 。 

同样， Peric . ttf 文件有符通 Pericles 字体， Pericl . ttf 文件包含浅色版；普通 Pescadero 字 
体在 Pesca . ttf 中，而粗体版是在 Pescab . TTF 中。 

请 注总 ， iS 后两个 TextBlock 元素均引用包含 Pescadero 普通版的文件，但 FontWeight 
和 FontStyleM 性分别设置为 Bold 和 Italic 。 这些属性应用于常规字体，因此会模拟这些 
样式，我用星号和脚注做了标注。 

PrivateFonts 程序实际显示四列文字。下图所示为从前面 XAML 文件产生的第一列。 


Kootenay 



请注意，实际粗体字型不同于模拟的粗体。另外，还要注意 Pericles 字艰如何显示大 
小写字母！ 

如果要在代码中引用一种专用字体，可以使用 XAML 中使用的相同字符串来创建 
fontFamily 对象： 

txtblk.FontFamily = new FontFamily("ms-appx:"/Fonts/Linds.ttftLindsey") ; 

PrivateFonts 程序 M 示了四列非常相似的文字，这还只是第一列，所以此时的程序还+ 
完整。 
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16.2 初试 Glyphs 

有一种 hJ 以代替 TextBlock 的元素称为 Glyphs 。 Glyphs 比 TextBlock 难用一些，但能 
分隔笮个字符。 

PrivateFonts 中第二列文本用以下标记进行显示。 

项 3: PrivateFonts | 文件： MainPage.xaml ( 片段） 

<Grid Grid.Column="l"> 

<Glyphs UnicodeString="Kootenay" 

FontUri="ms-appx:///Fonts/Kooten.ttf" 

FontRenderingEmSize="36" 

Fill="Black" 

OriginX="0" 

0riginY='M5" /> 


〈Glyphs UnicodeString="Lindsey M 

FontUri="ms-appx:///Fonts/Linds.ttf" 
FontRenderingEmSize="36" 



OriginY="90 M /> 


<Glyphs UnicodeString="Miramonte" 

FontUri="ms-appx:///Fonts/Miramo.ttf" 
FontRenderingEmSize="36" 

Fill-"Black" 

OriginX="0" 

OriginY="135 H /> 


<Glyphs UnicodeString="Miramonte Bold" 

FontUri="ms-appx:///Fonts/Miramob.ttf' 
FontRenderingEmSize="36" 

Fill-"Black M 



OriginY= ,, 180 M /> 


<Glyphs UnicodeString="Pericles" 

FontUri="ms-appx:///Fonts/Peric.ttf" 

FontRenderingEmSize="36 M 

Fill="Black" 

OriginX="0" 

OriginY="225 H /> 

<Glyphs UnicodeString="Pericles Light" 

FontUri-"ms-appx : ///Fonts/Pericl.ttf" 
FontRenderingEmSize="36" 

Fill-="Black" 

OriginX="0" 

OriginY="270" /> 


<Glyphs Unicodestring="Pescadero" 

FontUri="ms-appx:///Fonts/Pesca.ttf" 
FontRenderingEmSize»"36" 

Fill^-Black" 

OriginX="0" 

OriginY= M 315 w /> 


〈Glyphs UnicodeString:"Pescadero Bold" 

FontUri«"ms-appx:///Fonts/Pescab.ttf" 
FontRenderingEmSize="36" 

Fill=”Black" 

OriginX="0" 




〈Glyphs UnicodeString-"Pescadero Bold*" 

FontUri="ms-appx: ///Fonts/Pesca. ttf •• 
StyleSimulations="BoldSimulation" 
FontRenderingEmSi ze: •’ 36" 

Fill-"Black M 



<Glyphs UnicodeString="Pescadero Italic*" 

FontUri="ms-appx:///Fonts/Pesca.ttf" 

StyleSimulations="ItalicSimulation" 

FontRenderingEmSize="36" 



Glyphs 定义的是 UnicodeString 属性，而不是 Text 厲性。其他三个属性均为 必需 ： FontUri 
厲性(顾名思义)是字型文件的 URI „ 请注意，只有 URI ； 而+需要提供字型家族名称 。 Glyphs 
在低层处 W .7 型文件，它不知道字型家族名。 FontRenderingEmSize 等同于 FontSize 属性， 
但没有默 认值。 fill 属性也没有默认值。 

请注怠， SiT ； 两项引用了普通 Pescadero 字型文件，但把 StyleSimiilations 分别设 S 为 
BoldSimulation 和 ItalicSimulation。StyleSimulations 枚举还包括 BoldltalicSimulation 。 

OriginX 和 OriginY 属性表明文本相对于父级的位置，或荇更准确地说，相对于父级放 
置元袭的地方。此处的父级仅仅是一个中格 Grid , 而不是在第一列所使用的 StackPanel „ 
( Glyphs 元索集合的父级通常为 Canvas )。 源点指定 baseline 的左侧，未指定文木顶端。我 
直接把第一个 OriginY 设置为 45,并 R 毎次以45增加。从下图可以看出 PrivateFonts 显示 
的前两列对比效果。 


Kootenay Kootenay 

|UMsat lWsch 



Pericles Pericles 

Pericles Light Pericles Licht 



在实际程序中，会使用字喂规格定位每个 Glyphs 元素。 

如果需要在代码中设置 FontUri 属性.只耑创建 URI 对象并使用在 XAML 文件肴到的 
相同字 符串： 
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Glyph 元素并不能对多行文本自动换行。然而，该例并没有展示一个叫 Indices 的属性， 
这需要提供额外的系统开销来高精度分隔单个字符。也可以用 Indices 字符串表示替代字符, 
例如连字，连字是两个或两个以上图像字符的风格组合。 


16.3 本地存储的字型文件 


Glyphs 元素最常见于 XPS(XML Paper Specification ) 创建的文档中， XPS 是微软结合 
WPF 幵发的文档。 XPS 是一种固定页文档格式。也就是说，该文档所有页 ffi 的大小和布局 
均为固定，很像 Adobe PDF 。 

包含 XPS 文档的文件是一个“包”，本质上是一个 ZIP 文件，包含字型文件、位图和 
文档毎页的甲-独文件。文档毎页是一个包含 FixedPage(Windows Runtime 中无定义)根元素 
的 XAML 文件，一般包含一些以 ImageBrush 对象形式显示图形和位图的 Path 元桌，还包 
含用于显示文本的 Glyphs 元素。 Glyphs 元素有自己的 FontUri 属性并设 g 为引用 XPS 包中 
字体文件的 UR 1。 这些 Glyphs 元素已经设置好所存属性，以正确定位页中的文本。 

WPF 程序可以渲染 XPS 文件，并没有太多麻烦 。 Windows 8程序则要做很多事情。程 
序需要打开 XPS 包并解析申.个 FixedPage 文件。对于毎一页，程序需要实例化代码中的各 
种 Path 、 ImageBrush 和 Glyph 对象，所有时间都在补偿 Windows Runtime 不支持的任何 
XPS 功能。 

在 XPS 包中， ImageBrush 和 Glyphs 元素的 URI 引用包内的位图文件和字甩文件。这 
些位图和字型文件需要复制到应用的本地存储， URI 则需要修改以指向该存储。 

PrivateFonts 程序演示了该过程的可行性。第一次运行程序时，第 三列显 示使用 Windows 
8默认字体的文本，而不是使用任何专用字体，还没有第四列(见下图)。 



Kootenay 



Pericles 

Pericles Light 
P escadero 



Pescadero Bold* 

Pescadero Italic* 


Kootenay 
Lindsey 
Miramonte 
Miramonte Bold 
Pericles 
Pericles Light 
Pescadero 
Pescadero Bold 
Pescadero Bold* 
Pescadero Italic* 



之后再运行程序，第三列和第四列匹 Sil 前两列(见下图)。 



Miramonte 

Miramonte Bold 




Pescadero Bold 
Pescadero Bold* 

Pescadero Italic* 




Pescadero 


Pescadero Bold 
Pescadero Bold* 

Pescadero Italic* 


•simulated _ _ 

这种差异是程序结构所造成的偶然事件。第一次运行程序时，字体文件复制到应用的 
本地存储。 

项月 ： PrivateFonts | 文件： MainPage.xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 



this.InitializeComponent(); 
Loaded +- OnLoaded; 



StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
bool folderExists = false; 
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Loaded 处理程序检查本地存储是否存在名为 Fonts 的 y 录。如果+存在，则创建，然 
后把所有字型文件以相同名称复制到该目录。（如果可以同步进行，我会在构造函数之前的 
lnitializeComponent 中完成，以便在程序第一次运行时. XAML 分析器即可使用该文 件。） 
引用本地存储文件的标记和引用程序内容的标记非常相同，只不过前缀为 ms - appdata . 
且需要在 Fonts 目录前面加上 local 。 我敢肯定，不需要看也能明 ft 总体思路。 

项 H: PrivateFonts | 文件： MainPage.xaml < 片段） 



<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width:"*" /> 

<ColumnDefinition Width®"*" /> 

<ColumnDefinition Width="*" /> 

<ColumnDefinition Width-"*" /> 

</Grid.ColumnDefinitions> 


<StackPanel Grid.Column="2"> 

<TextBlock Text="Kootenay" 

FontFamily= H ms-appdata : ///local/Fonts/Kooten.ttf#Kootenay" /> 


<TextBlock Text="Pescadero Italic *.， 

FontFamily="ms-appdata:///local/Fonts/Pesca.ttf#Pescadero" 



<Glyphs UnicodeString= H Kootenay" 

FontUri="ms-appdata : "/local/Fonts/Kooten .ttf" 
FontRenderingEmSize="36" 



<Glyphs UnicodeString*"Pescadero Italic*" 

FontUri="ms-appdata : ///local/Fonts/Pesca.ttf" 
StyleSimulations a "Italicsinflation" 



OriginY="450" /> 



Grid.ColumnSpan="4" 
VerticalAlignment="Bottom" 
HorizontalAlignment="Center" /> 



</Page> 


如果志要在代码中做这些，就 使用在 XAML 文件中看到的相同 T 符串; 



glyphs.FontUri = new Uri("ms-appdata:///local/Fonts/Linds.ttf"); 


在 Windows 8 吋以渲染的所有现有复杂文件格式中， XPS 几乎肯定是最简中.的，因为 
其内容与在 Windows Runtime 中发现的元素类似，所有页面已经构建，所有图形和 Glyphs 






元素已精确定位在页面中。更有挑战性的是回流页格式，比如 EPUB , 而程序主要负责在 
页面中定位文字。这神工作需要更加熟悉字型规格。 

对字型规格®简单的方法涉及 TextBlock 调用 Measure ， 并获取宽度高度。这样可以确 
定段落中单个字的位置，段落中何处转行、贞面之间何处分段。然而，如果需要基线之上 
的不同字号或字型家族的甲-个 TextBlock 元素，则需要更多信息。 

此时，需要检査字型文件内部来提取字型规格或开始使用 DirectWrin —旦开始对字 
型规格使用 Direct Write , 很有可能发现 DirectWrite 是布局页面的最佳工具。 


16.4 排版功能増强 

Windows . Ul . Xaml . Documents 命名空间中的 Typography 炎只包括用来增强文本附加属 
性的集合。可以将这些附加属性插入到页的根元素、 TextBlock 元素或 Run 元素中，以控制 
文本 M 示的方方面面。但是会有一个陷阱，即不能保证这些功适用于所有字体。事实上， 
你会发现为了找到能响应这些附加属性的字体，要花很长时间！ 

在以下例子中，我在很大程度上依赖于 Typography 类的 WPF 版文档，能匹配一些含 
有特定字型的附加 M 性。 其中一畔实例涉及到 Lindsey 、 Miramonte . Pescadero 和 Pericles 
字型，这些字铟均作为程序内容。 


项 R: Typography Demo | 义件 ： Ma inPage. xaml ( 片段 ) 



</Style> 

</Page.Resources 〉 


<Grid Background:’’ {StaticResource ApplicationPageBackgroundThemeBrush}"> 



<TextBlock Text="Small Caps are Nice for Titles" 

Typography.Capitals="SmallCaps" /> 

〈TextBlock Text="Some random contextual alternates make script look more natural" 
FontFamily-"ms-appx : ///Fonts/Linds.ttf#Lindsey" 

Typography. ContextualAltemates="True'* /> • 

〈TextBlock Text="Stacked fractions: 1/2 1/4 1/8 1/3 2/3" 
FontFamily="Palatino Linotype" 

Typography.Fraction®"Stacked" /> 

<TextBlock Text="Historical forms : Four score and seven years ago" 
FontFamily="Palatino Linotype" 

Typography.HistoricalForms="True" /> 

<TextBlock Text= M Numeral alignment for tables: 0123456789" 

FontFamily="ms-appx:///Fonts/Miramo.ttf#Miramonte" 

Typography.NuraeralAlignment="Tabular" /> 


<TextBlock Text="01d-style numbers: 0123456789" 
FontFamily«"Palatino Linotype" 
Typography.NumeralStyle="01dStyle M /> 



FontFamily-"ms-appx:///Fonts/Pesca.ttf#Pescadero" 
Typography.StandardSwashes="1" /> 
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<TextBlock Text="Slashed Zero: 0" 

FontFamily="ms-appx:///Fonts/Miramo.ttf#Miramonte" 
Typography.SlashedZero="True" /> 

<TextBlock Text="STYLISTIC ALTERNATES WITH THE PERICLES FONT" 
FontFamily="ms-appx:///Fonts/Peric.ttf#Pericles" 
Typography. Styl ist icAl ternates=" 1 ’■ /> 

<TextBlock FontFamily="Palatino Linotype"> 

Sucrose is C<Run Typography.Variants="Inferior">12</Run 
>H<Run Typography.Variants="Inferior">22</Run 
>0<Run Typography.Variants 3 "Inferior">l1</Run> 

</TextBlock> 

</StackPanel> 

</Grid> 

</Page> 

显示效果如下图所示。 

Small Caps are Nice for Titles 

r6\v\^ow\ 十 ema 十 es look ： Khore 十 wral 

Stacked fractions : i i i I § 

Historical forml *: Four fcore and feven yearf ago 
Numeral alignment for tables: 0123456789 
Old-style numbers : 0123456789 
Standard Swashes\Vith The^Pescadero^Font 
Slashed Zero: 0 

STYLISTIC ALTCRNATCS WITH TH? PCRICUS FONT 

Sucrose is C12H22O11 


16.5 RichTextBlock 和段落 

虽然我们会继续把 TextBlock 筲选用于最多一段长度的文本，但 RichTextBlock 能提供 
若干增强功能。 RichTextBlock 没有 Text 属性，也没有以 Inlines 派生形式指定文本的 Inlines 
属性。 RichTextBlock 定义的是名为 Blocks 的属性， Blocks 属性是 Block 派牛.猫合。像 Inline 
—样， Block 派生自 TextElement , 并由此获取许多和文本相关的属性。此外， Block 还定 
义如下 属性： 

• LineHeight 

• LineStackingStrategy 

• Margin 

• TextAlignment 

此外，也像 Inline 一样， Block 本身没有实例化。目前源自 Block 的唯一类是 Paragraph , 
定义两个 属性： 

• Inlines , lnlines 派生类集合 

• Textindent , 用于设置段落的第一行缩进 
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因此， RichTextBlock 基木上是段落集合。 Margin 属性用于定于段落之间的空间，而 
Textlndent 缩进第一行。 

MadTeaParty 项目在 RichTextBlock 内使用 ScrolIViewer , 允许你细读刘易斯•卡罗尔《爱 
丽思漫游奇境》的第7章，包括三幅约翰 • 坦尼尔所画的插图。以下为 XAML 文件片段。 

项目 ： MadTeaParty I 文件 ： Main Page, xaml ( 片段） 

<Page ... > 

<Grid Background*"{StaticResource ApplicationPageBackgroundThemeBrush}"> 

〈ScrolIViewer Width="720" 

Padding="40 20"> 



</Paragraph> 
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Hatter, and here the conversation dropped, and the party sat 
silent for a minute, while Alice thought over all she could 
remember about ravens and writing-desks, which wasn’t much. 

</Paragraph 〉 

〈Paragraph Margin="0 6" TextAlignment="Center"> 

<InlineUIContainer> 

<Image Source="Images/ChapterVII-1.png" Stretch="None" /> 



<Paragraph Margin="0 6" Textlndent»"48"> 

The Hatter was the first to break the silence. 'What day of 
the month is it? # he said, turning to Alice: he had taken 
his watch out of his pocket, and was looking at it uneasily, 
shaking it every now and then, and holding it to his ear. 



〈Paragraph Margin="0 6" TextIndent="48"> 

Just as she said this, she noticed that one of the trees 


had a door leading right into it. 'That* s very curious! 
she thought. 'But everything^ s curious today. I think I 
may as well go in at once.* And in she went. 



<Paragraph Margin="0 6" TextIndent='M8"> 

Once more she found herself in the long hall, and close to 
the little glass table. 'Now, l r 11 manage better this time,' 
she said to herself, and began by taking the little golden 
key, and unlocking the door that led into the garden. Then 
she went to work nibbling at the mushroom (she had kept a 
piece of it in her pocket) till she was about a foot high: 
then she walked down the little passage: and 
<Italic>then</Italic> — she found herself at last in the 
beautiful garden, among the bright flower-beds and the cool 
fountains. 

</Paragraph> 

</RichTextBlock> 

</ScrollViewer> 

</Grid> 

</Page> 


Paragraph + 是派牛.自 FrameworkElement , W 此没有 Style 属性。如果要对很多 Paragraph 
对象中设置相同属性，则需要明确。“ A Mad Tea - Party ” 中大多数段落都有12像素段落间 
距的 Margin 属性，以及缩进第一行48个像索的 Textlndent 属性。 

inlineUIContainer 不 1 -j TextBlock —起用，但与 RichTextBlock —起用。因此， uj 以在 
文木中嵌入 UlElement 派牛类。町能包括 TextBlock , 因此该功能提供了在段落中嵌入文本 
的方法，而段落对 Text 属性包含了绑定。然而，嵌入的 TextBlock 元素木身+能换行。 

在 MadTeaParty 程序中， Image 元桌成为 RichTextBlock 的一部分。这要求 Image 元袭 
放入 InlineUIContainer 对象，而志要放入 Paragraph 。 现在没有办法处理_绕阁片的段 
落 文本。 如果想要用 C # 和 XAML 进行处理，则需要测最文本的单个中•闶，并且自己进行 
定位。 

把第7章向下滚动到肴到三张图片中的第三张.如下图所示。 











she got up in great disgust, and walked off ； the Dormouse fell 
asleep instantly, and neither of Ihe others took the least notice 
of her going, though she looked back once or twice, half 
hoping that they would call after hen the last time she saw 


•At any rate I'll never go there again!' said Alice as she 
picked her way through the wood. 'Il*s the stupidest Ip.i-pm 
I ever was at in all my life!' 


16.6 RichTextBlock 选择 

MadTeaParty 程序在运行的时候.用手指轻按一个中-词。所选中词两端会出现有两个 
脚形把手。 uj •以抓住这些把手并扩展选择。点击选择，会出现一个小菜中 .， 并把所选内容 
M 制到剪贴板。 

或者，如果没有触模屏. uj •以按 K 用鼠标按钮来选择文本。然后用鼠标心键中.击，弹 
山包含 Copy 选项的快捷菜中.。 

RichTextBlock 实施 SelectionChanged 事件、获取所选文本的 SelectedText 属性(但不是 
取代或删除)以及 SelectionStart 和 Selection End 属性。后两个属性为 TextPointer 类型， 
TextPointer 不仅提供抵消 TextBlock 内所选文木，也表明选样相对于 TextBlock 的像#位背。 

快捷菜中敁水之前还有 ContextMenuOpening 割 t 如果把寧件参数的 Handled 设胥属 
性为 true , 则不会 M 示菜申，也就是说，你吋以站示定制快捷菜中-。 

如果想让 RichTextBlock 不允许文本被选中，则■以把 IsTextSelectionEnabled 设筲为 
false 。 


16.7 RichTextBlock 和超限 

图书和阅读历 史上有两种砧 水扩肢文字的基木 方式： 卷轴(常见于古埃及、中®、希腊 
和罗马的地中海 文化) 或中. 豇集合 ( M 先形成 j •公元 d 初儿个 iu : 纪的欧 洲)。 

电脑卜.也有两种常见 格式： 大部分使用滚动的 m 把文本分成多页的大多数电子 
t 5 阅读器。 

我刚刚演水了 RichTextBlock 可呈现滚动文本，但 RichTextBlock 则能给文档分 !)；'， 大 
大超越丫之甜的文木 W . 示儿桌。这鸣员》〖以按顺序 ! ui ^々(比如在电 f 15阅读 器中) 或以相邻 
列显示。 
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过程如 F: 把所有想要显示的文本放入 RichTextBlock ， 然后赋予它一个有限尺寸，也 
就是说，无论手动还是作为正常网页布局的一部分，使其受限于 Measure 传递。 如果 
RichTextBlock 包含的文本多 T 其在所分配空间里显示的文本，则 HasOverflowContent 属性 
变为 true 。 为了 M 示 RichTextBlock 以后的第：页文本，可以创建 RichTextBlockOverflow 
类实例，并把该实例设置为 RichTextBlock 的 OverflowContentTarget 属性。 

RichTextBlockOverflow 还定义了 HasOverflowContent 和 OverflowContentTarget 属性， 
因此可以为每个页创建额外的 RichTextBlockOverflow , 并把它们串成一条链。 
RichTextBlockOverflow 元素从父级 RichTextBlock 继承了所有文字相关属性 (FontFamily 、 
FontSize 等等)。 

如果能估计出需要显示文档的最大页数，则完全可以在 XAML 中使用数据绑定来执行 
链接工作。 YoungGoodmanBrown 项 |:| 展示了具体实现。文本来自纳撒尼尔 • 霍桑 (Nathaniel 
Hawthorne ) 的短篇小说《好小伙布朗》 (Young Goodman Brown )， 是我从 古登懷 il •划拿 来的。 
正如 /l: A Mad Tea-Party - •章把整个文本放入一个取独 RichTextBlock , 我把 RichTextBlock 
的 OverflowContentTarget 属性赋予给 RichTextBlockOverflow 元索，因而形成链条。 

项冃 ： YoungGoodmanBrown | 义件 ： Main Page .xaml ( 片段） 

<Page ... > 

<Page.Resources 〉 

<local : BooleanToVisibilityConverter x:Key="booleanToVisibility" /> 

<Style TargetType="RichTextBlock"> 

〈Setter Property= ,, Width" Value*"480" /> 

<Setter Properrty="Margin" Value="24 0 24 0" /> 

<Setter Property="FontSize" Value="18" /> 

〈Setter Property="TextAlignment" Value="Justify" /> 

</Style> 

〈Style TargetType="RichTextBlockOverflow"> 

<Setter Property= ,, Width" Value="480 M /> 

〈Setter Property=* , Margin" Value="24 0 24 0" /> 

</Style> 

</Page.Resources> 



OverflovContentTarget=" {Binding ElementName=overflowl}"> 
<Paragraph TextAlignment="Center"> 


YOUNG GOODMAN BROWN 
</Paragraph> 








</Paragraph> 

<Paragraph Margin="0 6" Textlndent-'M8"> 

"Dearest heart, whispered she, softly and rather sadly, when her lips 
were close to his ear, "prithee put off your journey until sunrise and 
sleep in your own bed to-night. A lone woman is troubled with such 
dreams and such thoughts that she’s afeardof herself sometimes. Pray 
tarry with me this night, dear husband, of all nights in the year." 

</Paragraph> 


dreams and such thoughts that she* s 
tarry with me this night, dear husl 


</RichTextBlock> 

<RichTextBlockOverf low Name='*overflowl" 

Visibility="(Binding ElementName^richTextBlock, 
Path»HasOverflowContent, 

Converter*{StaticResource booleanToVisibility))" 
OverflowContentTarget="(Binding ElementName=overflow2}" / 


<RichTextBlockOverflow 


= M overflow2 u 


OverflowContentTarget-"(Binding 


=HasOverflowContent, 
： rter= {StaticResource too 
:get- M (Binding ElementN 



<RichTextBlockOverflow Name:"overflows" 

Visibility="(Binding ElementName^overflow4, 
Path=HasOver£lowContent, 


OverflowContentTa 


er»{StaticRes 
»t= H {Binding 


source booleanToV 
j ElementName=ov< 


Visibility))- 
verflow6)" /> 


BlockOverflow Name="overflow6" 

Visibility="(Binding ElementName=overflow5, 
Path-HasOverflowContent, 
Converter 3 1 StaticResource boolean 1 ： 
OverflowContentTarget="(Binding ElementName= 


booleanTOVisibility)}" 
intName=overflow7}" /> 


<RichTextBlockOverflow Name-"overflow7" 

Visibility*"{Binding ElementName=overflow6, 
Path=HasOverflowContent, 

Converter{StaticResource booleanToVisibility)J" 
OverflowContentTargec=''(Binding ElementName=overflow8J" / 


<RichTextBlockOverflow Name="overflow8 
Visibility*"{Binding Element! 


ElementName=over 
OverflowContent. 


rflow7. 


I StaticResource booleanToVisibility})" 

'(Binding ElementName=overflow9)" /> 


<RichTextBlockOverflow 

Visibility="{: 


="overflow9" 
ing ElementN. 


Converter=( 


ElementName=overj 
iOverflowContent, 
— IStaticResource kx 


oleanToVisibilityJ) M 
4ame=overflowlO}" /> 


"overflowlO" 
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<RichTextBlockOverflow Name="overflowll" 

Visibility:、Binding ElementName=overflowlO, 

Path=HasOverflowContent. 

Converter®{StaticPesource booleanTDVisibility) 
OverflowContentTarget="{Binding ElementName=overflowl2J" /> 


<RichTextBlockOverflow 


’ （Binding ElementName=overflowl1 , 
Path=HasOverflowContent, 
Converter {StaticResource booleanTo’ 
entTarget^"{Binding ElementName=ov 


Overf lowContentTarget*** (Binding 


<RichTextBlockOverflow 


"overflowl3 



Path=HasOverflowContent, 

Converter*{StaticResource booleanTOVisibility"" 
OverflowContentTarget="{Binding ElementName-overflowl4)" /> 

<RichTextBlockOverflow Name="overflowl4" 

Visibility="1 Binding ElementName=overflowl3, 

Path=HasOverflowContent, 

Converter-{StaticResource booleanToVisibility H" 
OverflowContentTarget="{Binding ElementName=overflowl5)" /> 


<RichTextBlockOverflow Name="overflow15" 
Visibility:Binding ElementNar 
PaCh=HasOverflowCc 


itName=over 

owContent, 


rflowl4 r 


Converter*{StaticResource booleanToVisibility)}" 
OverflowContentTarget="{Binding ElementName=ovecflowl6J" /> 


<RichTextBlockOver£low Name="over£lowl6" 

Visibility="(Binding ElementName=overflowl5, 
Path=HasOverflowContent, 

Converter{StaticResource booleanToVisibility))" 
OverflowContentTarget="(Binding ElementName=over£lowl7)" 


overflown" 


<RichTextBlockOverflow Narae="overClowl7 w 

Visibility*"(Binding ElementName=overflowl6 # 

Path=HasOverflowContent. 

Converter-{StaticResource booleanToVisibi 1 ity " 
OverflowContentTarget="{Binding ElementName=overflowl8)" /> 

<RichTextBlockOverflow Name="overflowl8" 

Visibility='M Binding ElementName=overflowl7, 
Path=HasOverflowContent, 

Converter*{StaticPesource booleanToVisibility) 
OverflowContentTarget* 8 "(Binding ElementName=overflowl9)" /> 


<RichTextBlockOverflow Name="overflowl9" 

Visibility * 5 "丨 Binding ElementName=over 
Path=HasOverflowContent. 
Converter*{StaticResource t 


overflowl8, 


Converter*{StaticResource booleanToVisibility) 
OverflowContentTarget = "丨 Binding ElementName=overflow201" 


<RichTextBlockOverflow Name="overflow20" 

Visibility* 5 **(Binding ElementName=overJ 
Path=HasOverflowContent, 
Converter {StaticResource be 
OverflowContentTarget="(Binding Elemeni 


DleanToVisibility)»" 
Mame=overflow 21 )" /> 


<RichTextBl 

V; 


ockOver ： 

isibilit 


'(Binding ElementName=overflow20 # 
Pa th=HasOverflowContent. 






</StackPanel> 


Converter 3 {Static5tesource booleanTOVisibility))" /> 


</ScrollViewer> 

</Grid> 

</Page> 

如果前一个 RichTextBlockOverflow 没有任何超限内容，则隐藏 F -个 
RichTextBlockOverflow , 并目 .P 余了最后一个外，毎个 RichTextBlockOverflow 通过绑定把溢 
出超限内容放入 K 一个。所有 RichTextBlockOverflow 元素用原始 RichTextBlock 共享 
ScrollViewer 的水平 StackPanel ， 因此，文木会形成水平滚动的列，如 K 图所示。 

VOUNG GOODMAN BROWN • o< dfeamv too. Mefhoughf as spolv them WK could be dtec«m«(i the second ti 

tioubl# in h« face, ai if a dt^am had «v«fned he» whal work years old apparently in th« samr i 


talks o< dfeamv loo. Mprtiought as «he spoke th*te vn could b« discerned, the second ti 

lioubl# in h« f»c*. df if A dream had wdirted he* whal work years old Appdre«itty in the same i 

ts lo b* don* (omghl. But no, no: l would kill h*f lo think iL Brown, and beating a considerabl 

Well th**s d bl«ss«d angel on earth- jnd after this one night ihougli pefhapt mor« in «xpfnsio>i 

rB cling to her skkts and (oRow he# lo heaven - mi^ht Iviv? bp«n taken lot lathet at 

With this extelteot inolv* toe th* hrture Goodman ^ pe*wi ww « simp»y t 一 


Young Goodman Brown came lorth a\ sunset into the street I"" cling to her skkts and (ollow he* lo heaven" 
at Sdlem village: but pul his head back. afte« Cfossing the With this excellent inolv* lor th* future Goodman 

Oweshold to ewhang# d parting kiss with his young wife Blown Irtt h-me« just.htd in making more on bH 

And Farth. at the wife was aptly named, thrust he* own present evil purpose He had taken a dreary >oad. darlctned 

p«Hi y head into Ih# slrwt Mting Ibe _nd ptoy with the by all th* gloomiwl t.r« of th« lo.«t whkh barely stood 

pink nbbons oi he« cap while she called to Goodman Biown asid« !o l*t the nartow path creep through, and closed 
•0««fest hemt. «vhispeted sh*. sol((y and idthef sadly. 拎 ly behind. It was all «t lonely as could be. and 

whpn he« li|» wefe <lo4« to his ear. 'pritlw* pul off your there l* this peojli**ity mi such j solitude that the UavetlM 

journey until tun>is« and slwp in youi own bed to-nighi A know* not who may be concealed by the »nnumefable 

loo# woman ii tioubl«d with such dreamt and such liunfcs and th« thick boughs overhead: so that with lorwty 

thoughts that she's afeard of he«se4l sometimes. Pray tarry footstw he m«y yH ti passing through an unseen 

with me this night dear husband, of aK nights tn the ywn.* multitude. 


Biown. "ol all mghls in the year this one night must I tarry s«kI Goodman B»own to himself and he glanced fearfully 

away *rom th*e My Journey. « Ihou call«it it. fo»th and behind him as he added "What H th» d«vil hims«lf should 

bjek again must needs be done Iwtict now and sunrive. be al my wy Hbow，. 

Whdt my sweet P»etty wite dost Ihou doubt me already His head b«aig turned b*ck. he passed <i crook of the 

and w* bul thrw months ma»»iedr load and loobmn forward Muim nl 


ihls that she's afeard of he>se(f sometimes. Pray tarry *ootstep5 he may y#« tie passing through an unseen 
r»e this night dear husband, of aH nights In th« ywn.' multitude. 

"My love and my Faith/ repUpd yoong Goodman - There may be a devilish Indian b^ltind evety «rw 

>.*ol all n>ghts fn the ye*r ihts one night must I tarry Goodman Biown to himself and he glanced learfuHy 

from th*e My |outn«y. as thou calleit il. fo»th and behind him m he added "What H lh« d*vil hims«lf should 
A9*n must needs be done Iwttt now and sunrive. be at my wry Hbow!* 

my sweet P»erty wife dost Ihou doubt me already His head b*mg turned b*ck. he passed a crook of the 

脅 but «hi*« months maniedr load, dnd, loofctng forward again, beheld th« liguie ol a 

"Then God bless you'* said FaMK with thr pink man. m grav* and decent altir*. sealed al the foo< o< an old 

is; *and may you find all well wh«n you come back ' Iree. He a*om dl Goodman B«own's appioach and walked 

-Ameni. cii«d Goodman Brown* .Say thy p»ay«v de» onward side by skle *wth him 

and go to bed at dusk, and no Katm will comr to 'Vou ar« late. Goodman Brown.' s«id h*. *Th« dodc ot 

•h* CM South was sinking as I came through Boston and 
So they parted dnd lh« young man pursued his way ’hat full Mte«n minutes agoW 

b«<r>g about to turn the como« by the m^^ting-house. "faith kept me back a while." iopl«d the young m«n 

>ked b&ck and mw the head of fdilh stdl peeping 4>tef with a ir*«noi in his voice, caused by the sudden appe«iAn<« 
ri»h a melancho»y air. in spite of h«f pink ffcboos. o* hh companion. iKooghnot who‘ un«xp«cled 

•Pooi Bute Fatih!' thought h«. fof h»s heart smote him. M was now deep dusk in the fofest *nd deepest in 


So they pdrted- And lh« young man pursued his way 
until being about to turn the (omtx by the m««ling-house, 
h* looked back and mw the head ol failh still peeping 4>te( 
him with* melancholy air. in spite o* h« pink rUxxis. 

'Poot htti* Fallh!* though! h*. for his bead smote Nm. 
-What a wr«tch am I to leave hef on such an enand! She 


lh* Old South wm sinking as I came through Boston and 
that ii full Mtc«n minutm agone* 

faith kept me back a while. ‘ icplied the young man. 
with a irMnoi in his yok«. caused by the sudden appMi^nce 
o* hit companion, though not whol^ un«xp«cled 

•t was now deep dusk in the fofesl And deepest In 
•hat P*»t of rt wh«re th«e two journeying As nearly as 


the ekte« petson wat at simply dacj 
simply in manner too. he hdd An 
who kn«w the wodd and who wou| 
al tlw governor's dinnef (able oi 
were it possible lhat his dffairs 
only thing about him that cl 
remarkable was his sl«H. which bo«i 
black snake, so curiomfy wtooght 
seen lo twist dnd wnggl« itself like: 
course, must have b«en dn ocula* di 
uncertain RghL 

•Come. Goodman Brown.* i 
•Ihls Is a dull pace (cm »h« b«ginnir 
ttdff if you are so soon w*ary* 

■friend* Mtd «he olhe». exch< 
a full stop, 'having kepi cowrvml 
my purpose now to letuin wheiKe ： 
touching the matter thou wof«l of * 
'Saywt thou so?* tep<ied he 
«P«t "Let us walk on n«ve(lhei«ss. 
if I ronvince thee no« thou ihall t 
Htlle way in the forest y*f 

•Too far! too far** exrM 
unconsciously resuming hit walk 
th» woods on such an eiiand. nor h 
Haw twn a race of honest men af 
days of the ma*ty?s. and shall I 
ol Brown that took th4s path an 
"Such company, thou woukht; 


这些列比延伸到屏辎整个宽度的文本可读性吏强。 

当然，如果不提供足够数最的 RichTextBlockOverflow 元素，文本会被截断，会永远无 
法读到故事结尾。因此，好用代码 牛 : 成 RichTextBlockOverflow 元素。 

如果在 Visual Studio 中创逑 Grid App 或 Split App 类型的项 ti, 会在 Common 文件夹 
得到 RichTextColumns 类。 该类派生自 Panel 并在其 MeasureOverride 方法中产生 
RichTextBlockOverflow 元素。 

下 Ifil 来讲另一种方法。像前两个项 [J 一样，在接下来的项 H 中， MainPage.xaml 文件包 
含 RichTextBlock 允素的完整文本。这一次是 F. 司各特 • 菲茨杰拉德 (F. Scott Fitzgerald ) 所 
著《伯尼丝剪头发》 （ fi£rm_ceflofas/^//a/r) 中爵七 时代的青少年故事。 

项 R: BerniceBobsHerHair | 文件： MainPage.xaml ( 片段 } 

<Page ... > 

<Page.Resources> 

<Style TargetType="RichTextBlock"> 

〈Setter Property="Width" Value="480" /> 

<Setter Property="Margin M Value*"24 0 24 0" /> 

〈Setter Property="FontSize" Value="18" /> 

<Setter Property="TextAlignment" Value="Justify" /> 

</Style> 


<Setter 

<Setter 


Type="RichTextBlockOverflow"> 

Property= "Width" Value=..480" /> 
Property= M Margin" Value=**24 0 24 0 M /> 
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</Style> 

</Page.Resources 〉 

<Grid Background**"{StaticResource ApplicationPageBackgroundThemeBrush)"> 
<ScrollViewer HorizontalScrollBarVisibility-"Hidden" 
VerticalScrollBarVisibility="Disabled"> 

<StaclcPanel Name-’.stackPanel" 

Orientation= M Horizontal"> 

<RichTextBlock SizeChanged="OnRichTextBlockSizeChanged"> 

〈Paragraph TextAlignment»"Center" FontSize="36" Margin="0 0 0 12"> 
"Bernice Bobs Her Hair" 

<LineBreak /> 
by 

<LineBreak /> 

F. Scott Fitzgerald 
</Paragraph> 


<Paragraph Margin="0 6"> 

After dark on Saturday night one could stand on the first tee of 
the golf-course and see the country-club windows as a yellow 
expanse over a very black and wavy ocean. The waves of this 
ocean, so to speak, were the heads of many curious caddies, a few 
of the more ingenious chauffeurs, the golf professional's deaf 
sister&#x2014;and there were usually several stray, diffident waves who 
might have rolled inside had they so desired. This was the 
gallery. 



<Paragraph TextIndent="48" Margin="0 6"> 

Then picking up her staircase she set off at a half-r 
moonlit street. 

</Paragraph> 

</RichTextBlock> 

</StackPanel> 

</ScrollViewer> 

</Grid> 

</Page> 


down the 


注意 SizeChanged 处理程序对 RichTextBlock 的设 W 。 该处理程序会去除之前大小变化 
期间所创建的所有 RichTextBlockOverflow 元素，然后会重新创建一批。 

项目 ： BerniceBobsHerHair | 文件： MainPage.xaml .cs ( 片 段） 

void OnRichTextBlocksizeChanged(object sender. SizeChangedEventArgs args) 

RichTextBlock richTextBlock = sender as RichTextBlock; 


if (richTextBlock.ActualHeight = 0) 
return; 


// Get rid of all previous RichTextBlockOverflow objects 
while (stackPanel.Children.Count > 1) 
stackPanel.Children.RemoveAt(1); 

if (!richTextBlock.HasOverflowContent) 
return; 


// Create first RichTextBlockOverflow 

RichTextBlockOverflow richTextBlockOverflow - new RichTextBlockOverflow(); 
richTextBlock.OverflowContentTarget = richTextBlockOverflow; 
stackPanel.Children.Add(richTextBlockOverflow); 


// Measure it 


richTextBlockOverf low. Measure (new Size (richTextBlockOverf low. Width, 

// If it has overflow content, repeat the process 
while (richTextBlockOverflow.HasOverflowContent) 


this.ActualHeight)); 



RichTextBlockOverflow newRichTextBlockOverflow = new RichTextBlockOverflow(); 
richTextBlockOverflow.OverflowContentTarget - newRichTextBlockOverflow; 
richTextBlockOverflow = newRichTextBlockOverflow; 
stackPanel.Children.Add < richTextBlockOverflow); 

richTextBlockOverf lew. Measure (new Size (richTextBlockOverf low. Width, this .ActualHeight) 


请注怠对 RichTextBlock 的 Measure 和 RichTextBlockOverflow 方法的 调用。 有必要强 
制该元素确定有多少文字可以在矩形内，并恰当设定 HasOverflowContent 厲性。结果如下 
图 所示。 



16.8 分页的危险 

我们己经看到 RichTextBlock 和 RichTextBlockOverflow 对几个短篇小说的应用，问题 
0然归结 T •一 点： 能否对粮部小说使用同样的方法？ 

我们来试一试。但我们先尝试一部短篇小说，例如，乔治 • 艾略特 (George Eliot ) 的著 
作《织.〗： *1 (南》 （ S /7 «s Mwvjer )。 SilasMamer 程序会显示实际页面，而+是显•文木列，并 
E 使 ffl FlipView 来 RichTextBlock 和 RichTextBlockOverflow 元桌。 

FlipView 能非常好地赋予程序真实电子书阅读器的界面外观。毎!51都4以占据幣个屏 
幕(或接近全屏锫). " J " 以滑动手指来前后翻 M 。 另外，我把 Slider 放到页而底部，提供阅读 
进度的视觉 M 现，并能非常快速导航到任何一贞。 

与本书其他程序相比 • SilasMamer 更适合于竖屏模式而不是横屏模式。在横屏模式中， 
视线长度人宽而无法舒适地阅读，如卜图所示。 



MCh w» .it a high p<lrh of onimalMMi when SiLii approa<»ied llw door ol U»e R.nnbow had. a usual. bw» slow and 
e company firs! assemW«J The pipes bogjn to be poHod in o which hod an air of seventy: «he more 
..w»io dra»»k spints and wt the Itw stdnrtq al each oll»er il .t bet were dep«*nd‘ng o" Hw lire« cn.ni who 

er-drink«rs. chilly men Jn liKlian jd<k»ls and smock-frocks. kt»pl I heir oyehds down .md rahb**d Iheir hands dcro&s 


I heir fnou«l»s. av if ll¥-ir <lrduglils of Iwf vw*rp a luitoreal duty .illeiMJed with ( 
of a neutrol disposition. d(ais>om»d xo stoivl oloof from human diH^r»f>o*i .i 
sttenre, by saying m a doubtful tone to h» coitwn iIh> butth^r-- 
"Some folks *ud viy ihdt W4、d (m»* beast you druv in ywterddy, Bob’" 

The bulchvr a )oliy. smiling r^d-hair^d man, was nol disposed to answor rash 


rrj>sinq sadness Al la>i« Mr Snell ll»e l<WM<lord..) man 
4** of wlio were .ill alike in need ol liquor, broke 


inp Duuiit.r d |owy. vmmny twiwirvu itwii. noi 

they wouldn't bt* »ur wrong, lolin * 

After this (o^blp delusive lh.*w, the silence sH m as wifely as 
"Wat il a f»*cl OuHmui^* said the tjrru^r. tdking up lh^ ihfMd o 
The farrier looked al the landlord, jfxl Ihe loncfiord looked Jt t 
*Rpd «i wav' Mid lh* buftlm m Ns 900 d-humoured hirtky ire 


^ iho»jd of diwourv* .lifer ih*> U»p^ ot d minutes 

looked M «he lxJttJw. at the person who must loke »h^ rv^ponsibtlity ol onswennq 
*d husky trebk— 'and a Durham it wjs * 


如果横过来，阅读体验会好很多，如 K 图所示。 



然而，我坚持程序竖屏编程这个偏好。在实际电子书阅读器 1.( 我广泛使用该术语來描 
述程序中读取大块文本的仟何 功能) 能有效分! ) i 至 关朮耍 。即使用户+能改变屏樁尺寸，人 
多数电子书阅读器仍然允许用户改变 宁型或 7•甩大小，而这会影响到15的分!。 

在平板电脑上运行 SilasMamer , uj •以旋转，尝试辅屏视图，并茛接观察 RichTextBlock 







和 RichTextBlockOverflow 元素对文档重新分页需要多长时间。 

电子书阅读器有一个臭名昭著的问题，涉及到维护和显示有意义的页码。任何时候文 
档重新分贞，就会有不同页数。 SilasMamer 程序在本地存储中保存信息，可以让你从卜.次 
离幵时的地方继续阅读，但程序没有为此0的保存页码。相反，程序用当前页除以页面总 
数计算得到。这是程序启动之间需要维护的的唯一值。 

项 R: SilasMamer | 文件： MainPage.xaml.cs ( 片段〉 
public sealed partial class MainPage : Page 
{ 

double fractionRead; 


public MainPage() 



Application.Current.Suspending += (sender, args)=> 



如果新的奴而大小和程序最后保#的值不完全相同，则看不到完全相同的一页，但至 
少很接近。 

真正的电子书阅读器 UJ ■能会下载书籍。对于该演示程序，我把古登堡计划文件作为程 
序资源。把木书分段是代码隐藏文件的责任。 

因此， XAML 文件中没有书的文本。而 XAML 文件在中心有一个 FlipView , 还会 U 
示书的标题、当前页和页数。头部当然小是绝对必需，但我想淸楚表示页数和当前页码。 
Slider 位于底部。 

项 SilasMamer | 文件： Main Page, xam 1 < 片段 > 

<Page ... > 

<Grid Background="{StaticResource App1icationPageBackgroundThemeBrush)"> 


<RowDefinition Height="Auto" /> 
<RowDefinition Height:"*" /> 
<RowDefinition Height="Auto" /> 









</StackPanel> 


<FlipView Name="flipView" 

Grid.Row:"1" 

Background»"White" 

SizeChanged="OnFlipViewSizeChanged" 

SelectionChanged="OnFlipViewSelectionChanged"> 


<FlipView.ItemsPanel> 



<Slider Name="pageS1ide r" 

Grid.Row="2" 

Margin»"24 12 24 0" 

Va1ueChanged="OnPages1iderVa1ueChanged" /> 

</Grid> 

</Page> 


程序的关键部分在 FlipView 的 SizeChanged 处理 程序。 基于 FlipView 的大小，程序必 
须牛.成适当数最的 RichTextBlockOverflow 元索。 

程序启动后， SizeChanged 事件第一次触发，处理程序必须访问书籍文件，并分成段落。 
在古登堡1|•划纯文本文件中，每段都包含硬回车行序列。段落用空白行来分隔。处理程序 
必须创建 Paragraph 对象，并添加到 RichTextBlock 元蒺，以处理该文本。 

项目 ： SilasMarner | 文件： MainPage.xaml.cs ( 片段 > 

async void OnFlipViewSizeChanged(object sender, SizeChangedEventArgs args) 

{ 

// Get the size of the FlipView 
Size containerSize = args.Newsize; 

// Actual value gets modified during processing here, so save it 
double saveFractionRead = fractionRead; 


// First time through after program is launched 
if (flipView.Iterns.Count = 0) 

( 

// Load book resource 
IList<string> bookLines = 

await PathlO.ReadLinesAsync("ms-appx : ///Books/pg550.txt", 
UnicodeEncoding.Utf8); 


// Create RichTextBlock 

RichTextBlock richTextBlock = new RichTextBlock 
[ 

FontSize = 22, 

Foreground = new SolidColorBrush(Colors.Black) 

)； 

// Create paragraphs 

Paragraph paragraph = new Paragraph(); 
paragraph.Margin = new Thickness(12); 
richTextBlock.Blocks.Add(paragraph); 

foreach (string line in bookLines) 

// End of paragraph, make new Paragraph 

if (line.Length =» 0 ) 

( 

paragraph = new Paragraph(); 
paragraph.Margin = new Thickness(12); 
richTextBlock.Blocks.Add(paragraph); 
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// Continue the paragraph 

else 

t 

string textLine = line; 

char lastChar = line[line.Length - 1J; 


if (lastChar != ' ') 
textLine +- ' 

if <line 【 0 】— 、 

paragraph.Inlines.Add(new LineBreakO); 
paragraph.Inlines.Add(new Run { Text = textLine }); 


// Make RichTextBlock the same size as the FlipView 
flipView.Items.Add(richTextBlock); 
richTextBlock.Measure(containerSize); 


// Generate RichTextBlockOverflow elements 
if (richTextBlock.HasOverflowContent) 

{ 

// Add the first one 

RichTextBlockOverflow richTextBlockOverflow = new RichTextBlockOverflow(); 
richTextBlock.OverflowContentTarget * richTextBlockOverflow; 
flipView.Items.Add(richTextBlockOverflow); 
richTextBlockOverflow.Measure(containerSize); 



// Add subsequent ones 

while (richTextBlockOverflow.HasOverflowContent) 


RichTextBlockOverflow nev^chTextBlockDverflcw = new RichTextBl 
richTextBlockOverflow.Overflov^ontentTarget = newRichTextBl 



richTextBlockOverflow = newRichTextBloc kOver flow; 


flipView.Iterns.Add(richTextBlockOverflow); 
richTextBlockOverflow.Measure(containerSize); 


在随后触发的 SizeChanged 处理程序中，程序可以消除 FlipView 并窀新 开始，但我 
决定如果需要则添加新的 RichTextBlockOverflow 元素或者移除不再需要的，试一下史卨 
效率。 


项 R: SilasMarner I 文件： MainPage.xaral.cs 《片段 > 

async void OnFlipViewSizeChanged(object sender, SizeChangedEventArgs args) 


// Subsequent SizeChanged events 



// Resize all the items in the FlipView 
foreach (object obj in flipView.Items) 

{ 

(obj as FrameworkElement).Measure(containerSize); 


// Generate new RichTextBlockOverflow elements if needed 


while ((flipView.Items[flipView.Iterns.Count - 1J 

as RichTextBlockOverflow).HasOverflowContent) 


RichTextBlockOverflow richTextBlockOverflow => 

flipView.ItemsIflipView.Items.Count - 11 as RichTextBlockOverflow; 
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RichTextBlockOverflow newRichTextBlockOverflow = new RichTextBlock 
richTextBlockOverflow.OverflowContentTarget = newRichTextBlock' 
richTextBlockOverflow = newRichTextBlockOverflow; 
flipView.Items.Add(richTextBlockOverflow); 
richTextBlockOverflow.Measure(args.NewSize); 

©move superfluous RichTextBlockOverflow elements 
e (!(flipView.Items IflipView.Items.Count - 2] 

as RichTextBlockOverflow).HasOverflowContent) 


flipView.1 


s. RemoveAt(flipView.I 


然而，我发现（你可能也会发现），这种逻辑似乎计算了数量不足的 
RichTextBlockOverflow 元素。整部小说虽然保留下来: T , 但文件末尾的一些许可信息被截 
断。 我不知道为什么会这样。 

SizeChanged i & iH •初始化标题文木和 Slider . 把 FlipView (W Selectedlndex 属性设 S 为堪 
T ' fractionRead 的值。 


项 R : SilasMarner | 文件： MainPage. xaml. cs 
async void OnFlipViewSizeChanged(object 


SizeChangedEvenCArgs 


int count = flipView.Items.Count; 
pageNumber.Text = "1"; // 

pageCount.Text = count.ToString(); 
pageSlider.Minimum = 1; 
pageSlider.Maximum = flipView.Items. 
pageslider.Value - 1; 

// Go to approximate page 
fractionRead = saveFractionRead; 
flipView. Selectedlndex = (int > Math. 


probably 


probably modified soon 


- 1, fractionRead * count); 


这是程序的大部分。用 T FlipView 的 SelectionChanged 处理程序改变标题和 Slider ， 
而用于 Slider 的 ValueChanged 处理程序改变 FlipView 的 Selectedlndex 属性。 


项目 : SilasMarner | 文件 : MainPage.xaml .cs < 片段） 
public sealed partial class MainPage : Page 


void OnFlipViewSelectionChanged(object sender, SelectionChangedEventAxgs 

{ 

int pageNum = flipView.Selectedlndex +1; 
pageNumber.Text = pageNum.ToString(); 
fractionRead = (pageNum - 1.0) / flipView.Iterns.Count; 
pageSlider.Value = pageNum; 


void OnPageSliderValueChanged(object sender, RangeBaseValueChangedEventArgs args) 


flipView.Selectedlndex 


s.NewValue) - 


现在，程序完成了，如何发挥作用？ 

我认为程序并不是很好。每次 SizeChanged 处理程序执行时都需要几秒钟，代码不能 
移动到辅助线程.因为几乎所有代码都涉及用户界面对象。另外，我发现在元素内容周 
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有一些偏移，表明我在挑战 RichTextBlock 分! 5 i 。 

这些 H 题总味>0 RichTextBlock 必须放弃用于大榧文档分贞。程序本身必须承担这些任 
务，最有效的方式是基 f 文本规格信息。如果有兴趣探讨这些问题，以 及町能 的解决方案， 
可以参考我写的一系列文章，发表于2011年的6〜11月 MSDN Magazine 
( http :// msdn . microsoft . com / en - us / magazine - 选择期 •并卜' 战)。这巧文 章介紹 Windows Phone 
7代码，但原理与处理 Windows 8非常类似。 

把大文件分成章节尤其绝对 冇用。 在传统排版以及电子书阅读器中，章节代表分页重 
新幵始的位置点。在特定章节内，可以随每个新豇曲而按需执行分页。 

16.9 使用 RichEditBox 富文本编辑 

就像 TextBlock 有增强版称为 RichTextBlock 一样， TextBox 也有增强版，但并小称为 
RichTextBox , 实际上称为 RichEditBox 。 

如果把 TextBox 当成传统 Windows Notepad 程序的“引擎”，则可以把 RichEditBox 
视为 Windows WordPad 程序的引笮。 RichEditBox 町以用 程序调整选择文本范围或者(更常 
见的) 允 i 午用户选择文本范围，并将特 殊字符 和段落格式应用到该选择。 RichEditBox 有内 
S 文件加栽及保存选项，但该选项只支持古怪的 RTF 。 

以卜 U 论只简 单触及 RichEditBox 。 你想耍通过 Document M 性来探 W 该类的独特 功能。 
Document 属性在内部设 S 为实施 ITextDocument 接口的对象，并在 Windows . UI . Text 命名 
空间中进行定义。接口支持加战并保#到数据流、用来设置和获取默认字符和段落格式的 
方法以及在文档范围内设置文木格式的方法。 

ITextDocument 还支持 Selection 屈性， Selection 指用户所选文档 区域。 Selection 属性 
为实施 ITextRange 接口的 ITextSelection 类甩。 ITextRange 接口女持剪贴板复制和粘贴，并 
规定 CharacterFormat 和 PragraphFormat 域性，后两#分别引用实施 ITextCharacterFormat 
和 ITextParagraphFormat 接口的对象。 

我们来用 RichEditBox 构建一个袪木的富文木编辑器，命名为 RichTextEditor „ 程序在 
顶部有应用栏，以应用字符格式(左侧)和段落格艾(心侧)，底部应用栏用 T 加载和保#文件， 
如下图所示。 



This is Ivp-aliunctl (Vniurv Schoolbook 

Thi* i4 Lucidly Ha*^dwriCl*^ 






一旦开始组合这类程序，你会意识到难点并不在于 RichEditBox 编程接口，该接口计 
算如何组织用户界面。我用了 StandardStyles . xaml 中的8种按钮样式，但 StandardStyles.xaml 
包含字型、字型颜色和字型大小的按钮样式，但如果要使用这些按钮，则需要调用弹出对 
话框，而这又是我在该程序中想避免的。因此，大小和字型家族库实现为应用栏中的 
ComboBox 控件，而且没有颜色选择。就像我刚刚说的，我只是蜻蜓点水一样谈谈 
RichEditBox 。 

以下为 XAML 文件。 可以看出， RichEditBox 的标记由于只有两个 AppBar 定义而显得 
很少。 

项 RichTextEditor | 文件： MainPage.xaml ( 片段） 



x : Class= M RichTextEditor.MainPage" 

xmlns^"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http: "schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local*"using:RichTextEditor" 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008'' 
xmlns:mc="http://schemas, openxmlformats.org/markup-cofnpatibility/ 2006 '* 



<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush) M > 
〈RichEditBox Narae="richEditBox" /> 



<StackPanel Orientation="Horizonta1 H 

HorizontalAl ignment=**Left:**> 

<!-- For CheckBox # s, need to conment out BackgroundCheckedGlyph in 
AppBarButtonStyle in StandardStyles.xaml --> 

<CheckBox Name="boldAppBarCheckBox" 

Style="(StaticResource BoldAppBarButtonStyle)" 
Checked="OnBolciAppBarCheckBoxChecked" 
Unchecked»"OnBoldAppBarCheckBoxChecked" /> 



Unchecked-"OnItalicAppBarCheckBoxChecked" /> 


<CheckBox Name="underlineAppBarCheckBox" 

Style***(StaticResource UnderlineAppBarButtonStyle}" 
Checked="OnUnderltneAppBarCheckBoxChecked" 

Unchecked="OnUnderlineAppBa rCheckBoxChecked" /> 
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Int32>36</x 


Int32> 



Int32>72</x 


Int32> 


</ComboBox> 



<RadioButton Name="alignLeftAppBarRadioButton" 

Style*"{StaticResource AlignLeftAppBarButtonStyle}" 
Checked="OnAlignAppBarRadioButtonChecked'' /> 


<RadioButton Name="a1ignCenterAppBarRadioButton" 

Style="{StaticResource AlignCenterAFpBarButtonStyle)" 
Checked*"OnAlignAppBarRadioButtonChecked" /> 


<RadioButton Name="alignRightAppBarRadioButton" 

Style="(StaticResource AlignRightAppBarButtonStyleJ" 
Checked="OnAlignAppBarRadioButtonChecked" /> 



</AppBar> 
</Page.TopAppBar> 



<StackPanel Orientation= M Horizontal M 



="Horizontal" 


HorizontalAlignment="Right"> 


<Button Style="{StaticResource OpenFileAppBarButtonStyle) n 
C1ick="OnOpenAppBarButtonC1ick" /> 


<Button Style="{StaticResource SaveAppBarButtonStyle} 
AutomationProperties.Name="Save As" 
Click="OnSaveAsAppBarButtonClick" /> 




</AppBar> 

</Page.BottomAppBar> 
</Page> 


CheckBox 用 于表水 标签为 Bold , Italic 和 Underline 的二个按钮。这三项要么开启要么 
关闭。 用丁•字型大小的 CheckBox 采用明确值进行初始化。文本编辑器通常提供输入自定 
义值功能，但由于简洁原因，我去除该功能。字体家族的 CheckBox 在代码隐藏文件中进 
行初始化。用于文木对齐的三个按钮是一组 RadioButton 控件。 

因为该项目要通过安装在系统中的字型列表填写第二个 CheckBox , 因此包括第15章 
的 DirectXWrapper 项 hh ComboBox 在 Loaded 处理程序中进行初始化。 Loaded 处理程序 
还从木地存储加载进行中的文档，以及涉及用户圾后所选文档的两个设置》文档和这些设 
黃保存到 Suspending 处理程序。 

项 R: RichTextEditor | 文件： MainPage.xaml.es (ji'S) 
public sealed partial class MainPage : Page 
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public MainPage{) 


Windows 程序设计(第 6 版) 


this.InitializeCoraponent(); 


Loaded += OnLoaded; 

Application.Current.Suspending += OnAppSuspending; 


async void OnLoaded(object sender, RoucedEventArgs args) 

1 

// Get fonts from DirectXWrapper library 
WriteFactory writeFactory * new WriteFactory(); 
WriteFontCoXlection writeFontCollection = 



int count - writeFontCollection.GetFontFamilyCount(); 
string[J fonts = new string 【 count 】； 

for (int i * 0 ; i < count; i++) 



WriteLocalizedstrings writeLocalizedStrings ■ 

writeFontFamily.GetFamilyNames(); 

int index; 

if (writeLocalizedStrings.FindLocaleName("en-us", out index)) 
fonts Iil = writeLocalizedStrings.GetString(index); 

else 

fonts【iI 二 writeLocalizedStrings.GetString(0); 


Array.Sort<string>(fonts); 
fontFamilyComboBox.ItemsSource = fonts; 


// Load current document 

StorageFolder localFolder = ^plicationData.Current.LocalFolder; 



StorageFile storageFile = await localFolder. CreateFileAsync ("RichTtextEditor. rtf"," 

CreationCollisionOption.OpenlfExists); 
IBandcmAccessStream stream = await storageFile.C^enAsync(FileAccessMode.Read); 
richEditBox.Document.LoadFromStream(TextSetOptions.FormatRtf, stream ); 

) 

catch 

( 

// Ignore exceptions here 


II Load selection settings 

IPropertySet propertySet = ApplicationData.Current.LocalSettings.Values; 

if (propertySet.ContainsKey("SelectionStart")) 

ric±TEditBox.EtoJTEnt.Selecticfi.StartR>sition ■ (int)prcpertySet["SelecticciStart'']; 

if (propertySet.ContainsKey("SelectionEnd")) 

richEditBox.Document.Selection.EndPosition = (int)propertySet["SelectionEnd"]; 


async void OnAppSuspending(object sender, SuspendingEventArgs args) 

{ 

SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral(); 


// Save current document 

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
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StorageFile storageFile = await localFblder. CreateFileAsync ("RichTextEditor. rtf" # 
CreationCollisionOption.ReplaceExisting); 
IBarxiirAccessStream stream = av«it storageFile.CpenAsync(FileAccessMxte.BeacWrite); 
richEditBox.Document.SaveToStream(TextGetOptions.FormatRtf, stream); 

) 

catch 

i 

// Ignore exceptions here 


// Save selection settings 

IPropertySet propertySet = ApplicationData.Current.LocalSettings.Values; 
propertySet["SelectionStart"1 = richEditBox.Document.Selection.StartPosition; 
propertySet["SelectionEnd"] = richEditBox.Document.Selection.EndPosition; 

deferral.Complete(>; 


ITextDocument 接口所定义的 LoadFromStream 和 SaveToStream 方法需要 FormatRtf 枚 
举项加战并保存 RTF 文件。否则，该方法只加战并保存纯文本。 

Suspending 处理程序只保存 lTextSelection 对象的 StartPosition 和 EndPosition 属性，而 
ITextSelection S 4为 ITextDocument 的 Selection 属性。 如果实际没有选择文字，则这鸣值 
相同.同时表明光标在文档的当前位 S ， 即插入键入文本的当前插入点。 

程序不保存任何格式信息，因为程序不维护适用 P 新文档或纯文本文件的任何默认格 
式。应用栏 h 的格式项仅适用于文档（或插入点）的特定选择。所有格式规范均属 P 
RichEditBox 所维护的文档内部。当然，程序可能允许用户为整个文档选择默认格式，但这 
是另一个用户界而的问题。 

程序不维护任何格式信息，因此应用栏出现时，程序必须初始化顶端应用栏中的所有 

文本格式项，以 Opened 事件为标志。这些项均基; T 文档中的当前选抒或插入点而进行初始 

化。可从 lTextSelection 对象的 CharacterFormat 和 ParagraphFormat 属性获得当前设置， 

lTextSelection M 示为 ITextDocument 的 Selection 属性。 

项目： RichTextEdi tor I 文件： MainPage.xaml.es ( 片段 } 
void OnTopAppBarOpened(object sender, object args) 

( 

// Get the character formatting at the current selection 

ITextCharacterFonnat charFormat = richEditBox.Document.Selection.CharacterFormat; 


// Set the CheckBox app bar buttons 

boldAppBarCheckBox.IsChecked =» charFormat.Bold ― FormatEffeet.On; 

italicAppBarCheckBox.IsChecked = charFormat.Italic == FormatEf feet.On; 

underUneAppBarCheckBox.IsChecked = charFormat.Underline *== UnderlineTyp>e.Single; 

// Set the two ComboBox"s 

fontSizeComboBox.Selectedltem = (int)charFormat.Size; 
fontFamilyComboBox.Selectedltem = charFormat.Name; 

// Get the paragraph alignment and set the RadioButton* s 
ParagraphAlignment paragraphAlign * 

richEditBox.Document.Selection.ParagraphFormat.Alignment? 
alignLefcAppBarRadioButton.IsChecked = paragraphAlign ParagraphAlignment.Left 

alignCenterAppBarRadioButton.IsChecked * paragraphAlign = ParagraphAlignment.Center 
alignRightAppBarRadioButton.IsChecked = paragraphAlign = ParagraphAlignment.Right 
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ITextCharacterFormat 对象定义 Bold 、 Italic 和 Underline 属性(如你所见)，而且还用熟 
悉的 FontStyle 属性和 Weight 属性进行补充， Weight 属性是对应于 FontWeights 类的属性 
的数值。 

FormatEfTect 取值为 ON 、 OFF 、 Toggle 和 Undefined 枚举。如果当前选择含有一些斜 
体和非斜体文本，则 Italic 属性的值为 FormatEffect . Undefmed , 而且相应应用栏按钮应该可 
能设置为不确定状态，但通过标准应用栏的风格，这种状态看起来与未选中状态相同，因 
此我没有理会。 

请注意，供选择的字型家族由 ITextCharacterFormat 对象的字符串 Name 属性所提供。 
该属性名称非常常见，所以很容易被忽视。 

Bold、Italic 和 Underline 按钮处理方式与此类似 。 ITextCharacterFormat 对象的 Bold 、 
Italic 和 Underline 属性根据 CheckBox 状态进行设 S , 因此，这些设置应用于当前选择或插 

入点。 

项 RichTextEditor | 文件： MainPage.xaml.cs ( 片段） 

void OnBoldAppBarCheckBoxChecked(object sender, RoutedEventArgs args) 

{ 

richEditBox.Document.Selection.CharacterFormat.Bold = 

(sender as CheckBox).IsChecked.Value ? FormatEffect.On : FormatEffeet.Off; 


void OnltalicAppBarCheckBoxChecked(object sender, RoutedEventArgs args) 




richEditBox.Document.Selection.CharacterFormat.Underline = 


(sencter as CheckBox).IsChecked.Value ? UnderlineType.Single : Under1ineType.None; 

) 

两个 ComboBox 控件的处理程序也一样简单。 

项目 ： RichTextEditor | 文件： MainPage.xaml.es ( 片段 } 

void OnFontSizeComboBoxSelectionChanged(object sender, SelectionChangedEventArgs args) 

( 

ComboBox comboBox = sender as CcxnboBox; 
if (comboBox.SelectedItem !■ null) 



void OnFontFamilyComboBoxSelectionChanged(object sender, SelectionChangedEventArgs args) 

i 

ComboBox comboBox = sender as ComboBox; 
if (comboBox.SelectedItem !» null) 

( 

richEditBox.IXxnjnent. Selection. CharacterFormat. Name = (string) ccmboBox. SelectedI tern; 

> 

) 

应用栏 1: 的最后-个格 式项适 用丁段 落。基于所选 RadioButton，ITextParagraphFormat 
对象的 Alignment 属性设置为 Paragraph A 1 ignment 枚举项之一。 

项 H: RichTextEditor | 文件： MainPage.xaml.cs ( 片 段） 

void OnAlignAppBarRadioButtonChecked(object sender, RoutedEventArgs args) 
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ParagraphAlignment paragraphAlign - ParagraphAlignment.Undefined; 
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if (sender = alignLeftAppBarRadioButton) 

paragraphAlign = ParagraphAlignment.Left; 

else if (sender =— a1ignCenterAppBarRadioButton) 

paragraphAlign = ParagraphAlignment.Center; 

else if (sender = alignRightAppBarRadioButton) 

paragraphAlign = ParagraphAlignment.Right; 

richEditBox.Document.Selection.ParagraphFormat.Alignment = paragraphAlign; 

) 

MainPage 中唯 剩 余的代码处理底部应用栏的 Open File 和 Save As 按钮。程序允许加 
载和保存扩展名为 . txt 和 . rtf 的文件。在适合当前文档的 Loaded 和 Suspending 处理程序的 
代码之后，这段代码相当明确。 

项目 ： RichTextEditor I 文件： MainPage• xaml.cs ( 片段 > 

async void OnOpenAppBarButtonClick(object sender, RoutedEventArgs args} 

FileOpenPicker picker = new FileOpenPicker(); 
picker.FileTypeFilter.Add(".txf); 
pic ker•FileTypeFiIter.Add(".rtf"); 

StorageFile storageFile » await picker.PickSingleFileAsync(); 

// If user presses Cancel, result is null 
if (storageFile == null) 
return; 


TextSetOptions textOptions ■ TextSetOptions.None; 


if (storageFile.ContentType !- "text/plain") 
textOptions = TextSetOptions.FormatRtf; 

string message ■ null; 



IRandofnAccessStream stream = await storageFile. OpenPisync (FileAccessMode. Read); 
richEditBox.Document.LoadFromStream(textOptions, stream); 

) 

catch (Exception exc) 

{ 

message = exc.Message; 


if (message != null) 

( 

MessageDialog msgdlg = new MessageDialog("The file could not be opened. " + 

"Windows reports the following error: 
message, "RichTextEditor"); 

await msgdlg.ShowAsync(); 


async void OnSaveAsAppBarButtonClick(object sender, RoutedEventArgs args) 

( 

FileSavePicker picker *= new FileSavePicker (); 
picker.DefaultFileExtension = ".rtf"; 

picker.FileTypeChoices.Add('• Rich Text Document", new List<string> { ".rtf" }); 
picker.FileTypeChoices.Add("Text Document", new List<string> { ".txt")); 
StorageFile storageFile = await picker.PickSaveFileAsync 0; 

"If user presses Cancel, result is null 
if (storageFile == null) 
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tions ■ TextGetOptions.None; 
ContentType != "text/plain "〉 


Stream stream = await storageFile .C¥)enAsync (FileAccessMxle. 
.Document.SaveToStream(textOptions, stream); 


reports the following 
"RichTextEditor"); 


msgdlg.ShowAsync(); 


基于文件选择器所返回的 StorageFile 的 MIME 类型，这两种方法决定是 否使用 
TextSetOptions.FormatRtf 和 TextGetOptions.FormatRtf 标志。我的经验表明，文件选择器表 
明所选文件 MIME 类型要么是扩展名为 . txt 的 text / plain 文件，要么是扩展名为 . rtf 的 
application/msword 文件，但如果 text/rtf 和 application/rtf 的 MIME 类带也与 RTF 文件相关 
联，我还是会小心硬编码进入程序的后一个 MIME 类型。 

如果没有指定 FormatRtf 标志， RichEditBox 方法会保存并加载纯文本文件。然而， 
SaveToStream 方法使用 Unicode (或 UTF -16) 编码保存纯文本，而文件中的每个字符均占用 
两个字节。这种编码并不常用于纯文本文件，而且文件开头不包含表小•编码的字节顺序标 
记 ( BOM)。Windows Notepad 可以加载这些文件，显然会从文件内容检查而决定编码，但第 
7章的 PrimitivePad 程序却不能。在遇到数据流的第一个零时就停止读取。 

保存自 PrimitivePad 的保存文件为 UTF -8 编码，但没有 BOM , 因此， RichEditBox 的 
LoadFromStream 方法假设编码为 UTF -16。 也就是说， RichTextEditor 无法正确加栽保存自 
PrimitivePad 的文件。文件中的每两个字节将视为包括筚个 Unicode 字符，因此拉丁字母的 
成对字符大都 M 示为中国汉字。 

用 RichEditBox 保存和加载纯文本文件更好的解决方案可能是利用 GetText 和 SetText 
方法以及常规 Windows Runtime 文件丨/ 0功能。 


16.10 自行文本输入 

当然， TextBox 和 RichEditBox 控件为程序提供了从计算机键盘获得文字输入的 最佧方 
式。但如果你想实现实现自行文字输入，该怎么办？ 

UIElement 类定义 KeyDown 和 KeyUp 事件，并且 Control 类用 OnKeyDown 和 OnKeyUp 
虚拟方法进行补充。然而，信息以 VirtualKey 值的形式传递给程序。 VirtualKey 是大枚举， 
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其枚举项坷用于键盘上的所有键。该信息适用于获取包括功能键或光标移动键的活动，但 
并非适用于字母数字输入。很难以一种与语言无关、设备无关的方式从键盘获取字符。 

获取字符输入有一个更好的事件，称为 CharacterReceived , 但该事件不由 UIEIement 
定义。而是由 CoreWindow 定义，可以从与应用关联的 Window 对象轻松获得 CoreWindow 。 

GettingCharacterlnput 项目简单演示了该方法。 XAML 文件中包含显示输入字符的 
TextBlocko 


项目 ： GettingCharacterlnput I 文件： MainPage.xaml ( 片段 ) 



代码隐藏文件附加一个处理程序用于 CoreWindow 定义的 CharacterReceived 事件，并 
获取该窗口的所有输入字符。字符是计算为 char 值的无符号整数。只需要对 Backspace 键 
进行特殊处理。 

项冃 ： GettingCharacterlnput | 文件： MainPage.xaml.cs 

using Windows.UI.Core; 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls; 

namespace GettingCharacterlnput 

{ 

public sealed partial class MainPage : Page 

{ 

public MainPageO 


this.InitializeComponent(); 



void OnCoreWindovCharacterReceived (CoreWindow sender, CharacterReceivedEventArgs args) 
( 

"Process Backspace key 

if (args.KeyCode == 8 && txcblk.Text.Length > 0) 
i 

txtblk.Text = cxtblk.Text.Substring(0, txtblk.Text.Length - 1); 



txtblk.Text += (cha r)a rgs.KeyCode ; 


Backspace 键是我唯一提供的 “ 编辑”功能。事件需要执行 KeyUp 和 KeyDown 来实现 
在键入的文本字符串内通过光标移动键也来回移动。你可能还想添加方法来选择包括键盘 
或指针的文木。对于史专业的实现，则需要_一个光标以及独*的彩色文本字符和背景来 
表尔选择。也就是说，你吋能会对每个字符使用单个 TextBlock 元素来显示所输入的文本(我 
肯定 TextBox 和 RichEditBox 看起来非常适合)。 

GettingCharacterlnput 项 hi 最大的问题在于仅从物理键盘获得输入。如果需要从 
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TextBox 和 RichEditBox 屏幕弹出的触控键盘输入，过程更复杂。以下为基础版本。 

BetterCharacterlnput 项目中的 MainPage.xaml 实例化自定义控件，名为 
RudimentaryTextBoxo 

项月 ： BetterCharacterlnput I 文件： MainPage.xaml < 片段） 

<Grid Background®"{StaticResource ApplicationPageBackgcoundThemeBrush}"> 

<local : RudimentaryTextBox Background="DarkBlue" 

* Width="320" 

Height="320" /> 

</Grid> 


RudimentaryTextBox 类派生自 UserControl , 而视觉元素主要包含显示键入文木的 
TextBlocko 

项月 ： BetterCharacterlnput | 义件： RudimentaryTextBox.xaml 



x:Class="BetterCharacterInput.RudimentaryTextBox" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

xmlns : x="http : //schemas.microsoft.com/winfx/2006/xaml"> 

<Grid Background="DarkBlue"> 

<TextBlock Name= M txtblk H 



FontSize- M 24 H 
TextWrapping="Wrap" /> 

</Grid> 

</UserControl> 


RudimentaryTextBox 代码隐藏文件中的 CharacterReceived 事件处理程序与先前项0中 
的相同，除了仅在控件有输入焦点时才连接处理程序。该类定义了一个用于键入输入的简 
单 Text 属性。 

项目 ： BetterCharacterlnput | 文件： RudimentaryTextBox.xaml.cs 

using Windows.UI.Core; 

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Automation.Peers; 

using Windows.UI.Xaml.Controls; 

using Windows.UI.Xaml.Input; 


namespace BetterCharacterlnput 

public sealed partial class RudimentaryTextBox : UserControl 

[ 

public RudimentaryTextBox() 

( 

this.InitializeComponent(); 
this.IsTabStop = true; 
this.Text - 


public string Text { set; get;) 

protected override void OnTapped(TappedRoutedEventArgs args) 

( 

this.Focus(FocusState.Programmatic); 
base.OnTapped(args); 


protected override void OnGotFocus(RoutedEventArgs args) 

{ 

Window.Current.CoreWinctow.CharacterReceived += OnCoreWindowCha racterReceived; 
base.OnGotFocus(args); 











在有多个用于获取键盘输入的 0 定义控件的实际应用中.你可能希 M 由页面而非控件 
本身来决定何时获取键盘输入。 

RudimentaryTextBox 唯一真正独特的部分是 OnCreateAutomationPeer 方法覆写。0动 
化同级提供编程控件来控制用户输入的功能，通常用来实现辅助技术和应用测试。为了能 
使控件在获得输入焦点时调用屏幕上的触控键盘，必须有一个自定义的&动化同级，它派 
生白 FrameworkElementAutomationPeer , 并实施 IValueProvider 和 ITextProvider 接口。 

该自定义自动化同级类也必须覆写 FrameworkElementAutomationPeer 构造函数和 
GetPattemCore 方法。实现 IValueProvider 需要两个属性和一个方法。而实现 ITextProvider 
还盅要两个 M 性和四种方法，但如果这样做只是为了用触控键盘输入提供&定义空间，则 
•以用非常简串-的方式来定义这些方法和属性。 

示例代码不简申-，但很接近。 











// Required for IValueProvider 
public string Value 
1 

get { return rudimentaryTextBox.Text;) 

) 

public bool IsReadOnly 



public void SetValue(string value) 



// Required for ITextProvider 

public SupportedTextSelection SupportedTextSelection 



public ITextRangeProvider DocumentRange 



public ITextRangeProvider RangeFromPoint(Point pt) 



public ITextRangeProvider RangeFromChild(IRawElementProviderSimple child) 



public ITextRangeProvider 【 ]GetVisibleRanges() 



public ITextRangeProvider[] GetSelection() 



从 Value 属性返回 null , 并从 SetValue 属性去除正文，可以进一步简化。 

点击深蓝色 RudimentaryTextBox 控件时，会弹出虚拟键盘(不过要想得到重大屯件的屏 
辂截图， 完全是另外一回事)。 
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将手指扫过 Windows 8屏幕的右边缘(或按快捷键 Windows + C ), 就会弹出当前 H 期和 
时间，以及五个称为 charm (超级按钮)的图标栏(见下图)。 



中心的超级按钮直接进入开始屏幕，似其他按钮也可以为应用提供服务。如果用户点 
击按钮，毎个按钮都会弹出一个窗格。如果应用在屏幕 h (辅屏状态除 外)， 就都支持和其 
他四个按钮冇关联的功能。 

木章首先探时如何处现 Settings 和 Share 两个图标，再关注 Devices 按钮，主要是想让 
程序 i 方问打印机。 


17.1 设置和弹窗 

点击本书 U 前任何程序中的 Settings 按钮.都只会肴到一项。该 Permission 项由 Windows 
提供，它列出了你所写的应用在 Package.appxmanifest 文件 Capabilities 部分中己中请的权 
限。运行时，应用吋以将项 U 添加到 Settings 列表，并且所添加的项会将 Permissions 项口 



推到列表底部。通常情况下，这些附加项提供的是有关程序的信息，可能有 About 、 Credits 、 
Terms of Use 或 Privacy Statement 等标签。其他项以从用） 1 获得输入，能会贴 I •- Options 
或 Feedback 标签。 

通常以一种非常熟悉的方式来实现己经添加到 Settings 列表中的毎一项，即带 
UserControl 的 Popup 。 按照惯例， Popup 定位在应用右边边缘并延伸到整个屏幕高度。 

让我来演示一下，把传统 About 对话框添加到 HngerPaint 项 H 。 我想把该程序提交到 
Windows Store , 想在 About 对话框展示本书封面和一个购买图书链接(链接到微软出版社 
的经销商 M 站)。我首先给 FingerPaint 项目添加一个新的 UserControl 项，并称之为 AboutBox 
类。以下为 XAML 文件。 

项 H: FingerPaint I 文件： AboutBox.xam! < 片段） 

<UserControl … Width-"400 H > 

<UserControl.Transitions> 

<TransitionCollection> 

<EntranceThemeTransition FromHorizontalOffset="400" /> 
</TransitionCollection> 

</UserControl.Transitions> 

<Grid> 

<Border BorderBrush="Black" 

BorderThickness="1" 

Backgrounds 4 04 0 4 0 " 

Margin="0 12" 

Padding="0 24"> 

<StackPanel> 

<StackPanel Orientation="Horizontal"> 

<Button Style="{StaticResource PortraitBackButtonStyle}" 
Foreground="Black" 

Click="OnBackButtonClick" /> 


<TextBlock 


</StackPanel> 


e="{StaticResource HeaderTextStyleI" /> 


<TextBlock FontSize» M 24" 

FontWeight="Light" 
TextWrapping-"Wrap" 

Margin="24"> 

This program was written by Charles Petzold 
and is just one of many example programs in 
his book 

<Ita1ic>Programming Windows</Italic>, 

6 th edition. 

<LineBreak /> 

<LineBreak /> 

You can purchase a copy at many bookstores 
or directly from the O'Reilly website. 
</TextBlock> 


erlinkButton HorizontalAlignment=' , Center" 

NavigateUri»"http://shop.oreilly.com/product/0790145369079.do"> 
<StackPanel> 

<Image Source®"Assets/BookCover.gif" 

Stretch«"None" /> 

<TextBlock TexCAlignment="Center"> 

<Italic>Programming Windows</Italic>, 

6 th edition 
</TextBlock> 

</StackPanel> 
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</Border> 

</Grid> 

</UserControl> 

我已经为给控件指定了特定宽度，但没有指定特定高度，因为它会拉伸到显示窗口的 
高度。我在顶部和底部预留了一点空间，并且提供过渡，空间看上去似乎是从右侧滑入。 
控件有 Back 按钮，包含 Click 处理程序，还有链接到 O’Reilly M 站的本书0录页 URL 的 
HyperlinkButtonoHyperlinkButton 的内容包柄 Image 元糸 ， Image 元索引用 T 我添加到 Assets 
文件夹中的一张位图。 

用于 Back 按钮的 Click 处理程序十分确定该控件的 h 层结构是 Popup , 冈此，将 Popup 
的 IsOpen 属性 设齊为 false 。 

项目： FingerPaint 丨文件： AboutBox.xaml .cs (片 段） 

void OnBackButtonClick(object sender, RoutedEventArgs args) 

( 

// Dismiss Popup 

Popup popup = this.Parent as Popup; 

if (popup != null) 

popup.IsOpen = false; 

) 

这是解除弹窗的一种方式。 

实现 About 对话框对 FingerPaint 程序的影响非常小。 MainPage 构造函数获取 

SettingsPane 对象并给 CommandsRequested 事件附加处理程序。 

项月： FingerPaint | 文件： MainPage• xaml .cs (片 段） 
public MainPage () 


// Install a handler for the Settings pane 

SettingsPane settingsPane = SettingsPane.GetForCurrentView(); 
settingsPane.CommandsRequested + = OnSettingsPaneCommandsRequested; 


SettingsPane 及相关类和枚平都占用 Windows . U 1. ApplicationSettings 命名空间。从概念 
上讲， SettingsPane 对象指用户按 K Settings 按钮时 Windows 所显示的窗格。这就是为什么 
是获取而不是创建 SettingsPane 对象的原因。如果窗格身显示，就会请求应用添加额外 
项。这就是 CommandsRequested 处理程序所做的事情。 

挂接到其他超级按钮也相类似。 SettingsPane 还有 Show 方法，能用编程来 M 示设置窗 
格，但对于大多数目的，你可能只想为 CommandsRequested 事件安装处理程序。不要保留 
SettingsPane 对象， KT 以把 MainPage 结构中的两个语句组合成一个： 

SettingsPane.GetForCucrentView().CormandsRequested += OnSettingsPaneCommandsRequested; 

如果程序运行， 用户 按下 Settings 按钮，就会调用 CommandsRequested 事件。这时吋 
以给 Settings 窗格增加额外命令。每次按下 Settings 按钮的时候都可以增加额外命令，因此， 
吋以 根据这些额外命令来判断当前应用状态。 

FingerPaint 通过给列表添加 SetlingsCommand 对象来处理 CommandsRequested 事件。 

项 H : FingerPaint I 文件： MainPage• xaml .cs (片段> 

void OnSe11ingsPaneCommandsRequested(SettingsPane sender, 

SettingsPaneCommandsRequestedEventArgs args) 



SettingsCommand aboutCoramand = new SettingsCommand(0, -About", OnAboutInvoked); 
args.Request.ApplicationCommands.Add(aboutCommand); 


该命令有一个 ID ( 我没有使用，因此设 S 为 0)、 一个文本标签以及一个用户选择该命 
令时会调用的方法。程序从 CommandsRequested 处理程序返回之后，窗 格就显 示新的 About 
信息。 

以下为处理该命令的 方法。 


项冃 ： FingerPaint 丨文件： MainPage.xaml.cs ( 片段 } 
void OnAboutInvoked(IUICommand command) 

[ 

AboutBox aboutBox = new AboutBox(); 
aboutBox.Height = this.ActualHeight; 

Popup popup = new Popup 

IsLightDismissEnabled = true. 

Child = aboutBox, 

IsOpen = true# 

HorizontalOffset = this.ActualWidth - 


Popup 出现 在贸面 右侧的同定位置，因此用于设 S AboutBox 的 Height 以及设背和 
Popup 的 HorizontalOffset 的代码很简中效果如 __ F 图所 A 。 



IsLightDismissEnabled M 性设 HuJ ■以确保如果用户按住 p op 叩以外的仟何地方 ， Popup 
就会消除， AboutBox 中的 Back 按钮也提供消除。如果用户按 K Hyperlink 按钮， P 叩 up 就 
会消除，同时启动 IE 浏览器。 

17.2 通过剪贴板共享 

通过 Share 超级图标共享数据涉及 Windows.ApplicationModeLDataTransfer 和 
Windows . ApplicationModel . DataTransl ' er.ShareTarget 命名空间中的类。第一个命名空间还包 
括一•个非常传统的机制来传输 Windows 应用数据，即剪贴板。 

我®先添加剪贴板 来支持 FingerPaint , 冉处理 Share 超级阁标。给处理位图的程序添 
加剪切板有些复杂。你 " j 能想实现选样 API 功能以便用户能刻出绘 pj 的矩形区域，然活复 




制到剪贴板。如果还想实现粘贴 API 功能，允许要进入的位图定位到当前图片的某个 位置。 

但我要采用一个简单的方法即 Copy 命令将整个作品复制到剪贴板， Paste 命令把输入 
的位图作为新图片，就像从文件中载入，只不过没有文件名。 

第一件事情是把 Copy 和 Paste 按钮添加到应用栏。 

项 3:FingerPaint | 文件： MainPage.xaml < 片段） 

<Page.BottomAppBar> 



<Button Style="{StaticResource CopyAppBarButtonStyle)" 
Click="OnCopyAppBarButtonClick" /> 

<Button Name="pasteAppBarButton" 

Style-"{StaticResource PasteAppBarButtonStyle)" 
Click="OnPasteAppBarButtonClick" /> 

</StackPanel> 

</Grid> 

</AppBar> 

</Page•BottomAppBar> 

Paste 按钮需要名称，因为必须通过基于剪贴板 I •.实际位图数据情况的代码来启用和禁 
用 Paste 按钮。 

我决定在 MainPage 的另一个部分类实现文件中实现所有共享数据代码，该文件名为 
MainPage . Share.cso Mainpage 构造函数会调用该类中的一个方法。 

项吕 ： FingerPaint 丨文件： MainPage• xaml.cs { 片段 > 
public MainPage () 


// Call a method in MainPage.Share.cs 
InitializeSharing(); 


在某种程度上，方法会检查 Paste 按钮是否已启用并设置一个事件处理程序，而当剪贴 
板内容发生改变时，就调用该事件处理程序。 

项 H:FingerPaint 丨文件： MainPage.Share.cs 《片段） 
public sealed partial class MainPage : Page 



// Initialize the Paste button and provide for updates 



void OnClipboardContentChanged(object sender, object args) 


CheckForPasteEnable(); 





DataPackageView dataView = Clipboard.GetContent(); 
return dataView•Contains(StandardDataFormats.Bitmap); 



Clipboard 是一个只有四个方法和一个事件的静 态类。 其中两个最重要的方法是 
getContent 和 setContento getContent 返回 DataPackageView 对象，该对象提供检沒当前剪 
贴板内容的简便方法并确定位图是否 存在。 

SetContent 需要 DataPackage 对象，该对象有许多方法可以把各种形式的数据 S 制到剪 
贴板，其中包括一个名为 SetBitmap 的方法。剪贴板 Copy 按钮的处理程序会创建 
DataPackage 并把操作设 S 为 Move , 也就是说，项会进一步处理放入剪贴板的位图。 

项 H:FingerPaint 丨义件： MainPage.Share.cs ( 片 段） 

async void OnCopyAppBarButtonClick(object sender, RoutedEventArgs args> 

( 

DataPackage dataPackage = new DataPackage 



dataPackage.SetBitmap(await GetBitmapStream(bitmap)); 


Clipboard.SetContent(dataPackage); 



然而， SetBitmap 方法并不想让东西和 BitmapSource •样平凡。相反， SetBitmap 想要 
会引用编码位图图片的 RandomAccessStreamReference 。 可以从 
InMemoryRandomAccessStream 创建 RandomAccessStreamReference 。这工作是调用 
SetBitmap 时所引用的 GetBitmapStream 方法来完成的。 

注意， GetBitmapStream 调用的参数是作为字段存储在 Mainpage 中的 WriteableBitmap 。 
我对 GetBitmapStream 进行了泛化处理，它可以从该参数创建0身的 pixels 数组，但应该可 
以访 M 同样以宁•段形式#储在 Mainpage 中的 pixels 数约 U 

项 n:FingerPaint | 文件 ： MainPage • Share.cs ( 片段 } 

async Task<RandomAccessStreamReference> GetBitmapStream(WriteableBitmap bitmap) 

{ 

// Get a pixels array for this bitmap 

byte[J pixels = new byte[4 * bitmap.PixelWidth * bitmap.PixelHeightJ; 

Stream stream = bitmap.PixelBuffer.AsStreamO; 
await stream.ReadAsync(pixels, 0, pixels.Length); 

// Create a BitmapEncoder associated with a memory stream 
InMemoryRandomAccessStream memoryStream = new InMemoryRandomAccessStreamO; 
BitmapEncoder encoder = await BitmapEncxcier. CreateAsync (BitmapEncoder. PngEncoderld, memoryStream); 
// Set the pixels into that encoder 

encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied, 

(uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight, 96, 96, pixels); 



// Return a RandomAccessStreamReference 

return RandomAccessStreamReference.CreateFromStream(memoryStream); 

Paste 逻辑比较复杂，不仅是因为要根据剪贴板中的位图内容来启用 Paste 按钮。如果 
没有保存当前绘画， 而且用 户按下 Paste 按钮，程序就会要求应该保存或放弃绘好像用 
户已经选择加战新文件一柞。 
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也就是说， Paste 按钮的处理程序应该调用 Mainpage . FiIe . cs 中的 Check!IDkToTrashFile 
方法，并且向其传递的方法应该在执行 Paste 时执行。在调用 ChecklfDkToTrashFile 之前， 
我并不淸楚应该怎么处理传入的位图。我担心用户可能选择保存现有图片，而在此期间剪 
贴板内容就会改变。通过立刻获取像素矩阵，我避开了这个问题。但代码尚未创建 
WriteableBitmap 。 在此之前要求新位图的儿个关联项必 须以字 段形式存储。 

项目 ： FingerPaint | 文件： MainPage.Share.es ( 片 段） 
public sealed partial class MainPage : Page 
( 

int pastedPixelWidth, pastedPixelHeight; 
byte 【】 pastedPixels; 


async void OnPasteAppBarButtonClick(object sender, RoutedEventArgs args) 

{ 

// Temporarily disable the Paste button 
Button button = sender as Button; 



// Get the Clipboard contents and check for a bitmap 
DataPackageView dataView = Clipboard.GetContent(); 


if (dataView.Contains(StandardDataFormats.Bitmap)) 

{ 

// Get the stream reference and a stream 

RandomAccessStreamReference streamRef = await dataView.GetBitmapAsync(); 
IRandomAccessStreamWithContentType stream = await streamRef.OpenReadAsync(); 


// Create a BitmapDecoder for reading the bitmap 
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream); 

BitmapFrame bitmapFrame = await decoder.GetFrameAsync(0); 

PixelDataProvider pixelProvider = 

=.Get PixelDataAsync (BitmapPixelFormat. Bgra8 / 

BitmapAlphaMode.Premultiplied, 
new BitraapTransform(), 
ExifOrientationMDde. BespectExifOrientation, 
mentMode.C 


ColorManagemen 


.ColorManageToSRgb); 


// Save information sufficient for creating WriteableBitmap 
pastedPixelWidth = (int)bitmapFrame.PixelWidth; 
pastedPixelHeight = (int)bitmapFrame.PixelHeight; 
pastedPixels = pixel Provider .DetachPixelDataO; 


// Check if it's OK to replace the current painting 
await ChecklfOkToTrashFile(FinishPasteBitmapAndPixelArray); 


// Re-enable the button and close the app bar 
button.IsEnabled = true; 
this.BottomAppBar.IsOpen = false; 


async Task FinishPasteBitmapAndPixelArray() 

( 

bitmap = new WriteableBitmap(pastedPixelWidth, pastedPixelHeight); 
pixels = pastedPixels; 


"Transfer pixels to bitmap, among other chores 
await InitializeBitmapO ; 

// Set AppSettings properties for new image 
appSettings.LoadedFilePath = null; 
appSettings.LoadedFilename = null; 
appSettings.IsImageModified = false; 
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要实现剪贴板支持，还需要一项工作。许多用户都熟悉通过快捷键 Ctrl+C 和 Ctrl+V 进 
行复制和粘贴操作，闵此，我给 Mainpage.Share.cs 也加入了该项支持，同时还利用了现有 
按钮的处理程序。 

项 H:FingerPaint I 文件： MainPage. Share.cs ( 片段 > 
public sealed partial class MainPage : Page 



// Watch for accelerator keys for Copy and Paste 
Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated +- 
OnAcceleratorKeyActivated; 



OnAcceleratorKeyActivated(CoreDispatcher 


AcceleratorKeyEventArgs 


((args.EventType — CoreAcceleratorKeyEventTyp>e.SystemKeyDown II 
args.EventType == CoreAcceleratorKeyEventType.KeyDown) && 
(args.VirtualKey = VirtualKey.C || args.VirtualKey *= VirtualKey.V)) 


CoreWindow 
CoreVirtualKeyStates 


L.CoreWindow; 
CoreVirtualKeyStates.C 


Only want case where Ctrl is down 
((window.GetKeyState(VirtualKey.Shift) & down)= 
(window.GetKeyState(VirtualKey.Control) & down) 
(window.GetKeyState (VirtualKey^ 


down 


if (args.VirtualKey = VirtualKey.C) 

I 

OnCopyAppBarButtonClick(null, null); 

) 

else if (args.VirtualKey = VirtualKey.V) 

I 

On Pa s teAppBa rBu t tonC1ick(pa ste^>pBa rBu11on, null); 


17.3 Share 超级按钮 

程序吋以通过两种方式使用 Share 超级按钮。我耍展示一个程序如何把数据提供给其 
他程序。把一个应用作为其他应用的数椐接收对象，相当困难。第二项 T. 作需要应用在 
Package.appxmanifest 的 Declarations 部分中把自己明为共享 IJ 标，以-•种独特状态进行 
激活，并为该11的提供特殊的用户界 Ifti 。 

程序 "] ■以通过给 DataTransferManager 实例设菁班件处理程序而成为 Share 提供养，而 
给其他应用提供位图的程序也 M 过复制位图到剪贴板的同一个 
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RandomAccessStreamReference 而成为 Share 提供者。在 MainPage . Share.cs 中已经定义了 
GetBitmapStream 方法，因此用来支持 Share 按钮的额外代码微小足道。 

项目 ： Finger Paint 丨文件： MainPage.Share.cs ( 片 段） 
public sealed partial class MainPage : Page 



// Hook into the Share pane for providing data 

DataTransferManager. GetForCurrentView () . DataRequested += OnDataTransferDataRequested; 


async void OnDataTransferDataRequested(DaCaTransferManager sender, 

DataRequestedEventArgs args) 
l 

DataRequestDeferral deferral = args.Request.GetDeferral(); 

II Get a stream reference and hand it over 

RandomAccessStreamReference reference = await GetBitmapStream(bitmap); 

args.Request.Data.SetBitmap(reference); 

args.Request.Data.Properties.Title = "Finger Paint"; 

args.Request.CJata.Properties.Description = "Share this painting with another app"; 
deferral.Complete(); 


现在， FingerPaint 正在运行，如果用户选抒 • Share 按钮，窗格不会报告 “This app can’t 
share ” ，而会说 “Finger Paint ” 和 “Share this painting with another app ” 。显然，已经调用 
了 DataRequested #件处理程序，并且 Windows 有 RandomAccessStreamReference , 因此， 
在接着 Share 窗格中出现是一个吋以接受位图数据的应用列表。程序提供丫位图，因此+ 
需要程序的进一步交瓦。 


17.4 基本打印 

在本前记示的任何程序中，如果激活超级按钮并按 K Device 按钮，会得到 Device 
窗格，该銜格+会提及关： T - 打印机的任何怙况。应用耑要先注册到 Windows 8,说明它可 
以打印。 

有三个命名空间在打印中发挥作用。 

• Windows . Ul . Xaml . Printing 命名空间有 PrintDocument 炎并支持其事件。正如名称 
所示， PrintDocument 代表程序用户希 M 打印的东两。 

• Windows . Graphics.Printing 命名空间有 PrintManager ， 是 Windows 8 列出 的打印机 
和打印机选项的窗格接口：以及 PrintTask、PrintTaskRequest 和 PrintTaskOptions 
类。打印“任务” ( task ) 和打印“工 作” ( job ) 是一回事,即打印特定文档的打印机 
特定用途。 

• Windows . Graphics . Printing . OptionDetails 命名空间包含/ I 』来自定义打印选项的类。 
打印机 API 的很多内容涉及系统幵销，而+涉及给打印贞 Iflj 实际定义文本和阁形的过 

程。事实 k , Windows 8应用在打印纸 h 进行打印的方式和在屏 ® | •.绘图的方式一 样：通 
过派生自 UIElement 类的实例的 " r 视树。般怙况下，根允素为带子炎:的 Border 或 Panel 。 
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可以在 XAML 中定义该视觉树，但可能更多时候是在代码中创建。 

定义显示在屏幕上的元素，有一种有用的指导，即把视频显示当成每英寸有 96 个像索 
的分辨率。对打印机也这么做，只+过更精确。不管打印机的实际分辨率如何，总是可以 
把它当作 ％ DPI 的设备。 

用户点击 Device 按钮图时，为了让 Windows 8 列出打印机设备，首要任务就是设置事 
件处理 程序： 

PrintManager printManager = PrintManager.GetForCurrentView(); 
printManager.PrintTaskRequested += OnPrincManagerPrintTaskRequested 

两行可以合并为 一行： 

PrintManager.GetForCurrentView() .PrintTaskRequested += OnPrintManagerPrintTaskRequested; 

静态 GetForCurrentView 方法获得与程序窗口相关的 PrintManager 实例。为 
PrintTaskRequested 事件设置一个处理程序，程序就声称它是可打印的。处理程序如下： 

void OnPrintManagerPrintTaskRequested (PrintManager sender, PrintTaskRequestedEventArgs args) 


如果用户点击 Device 按钮(或按卜 _ Windows + K ), 就会调用处理程序，但(你很快就会 
看到)它需要调用另一个带回调函数的方法，以便 Windows 可以显示打印机列表。 

只有当应用准备好要实际打印东西的时候，才会附加 PrintTaskRequested 处理程序。如 
果应用在可以进行打印之前要求从用户获取一些初步信息或需要加载文档，则不应该把处 
理程序附加到 PrintTaskRequested 事件。如果程序又发现自身处于不可打印的情况，则应该 
解除处理 程序： 

PrintManager.GetForCurrentView().PrintTaskRequested -= OnPrintManagerPrintTaskRequested; 

对于本章的示例程序，我主要在表示整个过程的 OnNavigatedTo 和 OnNavigatedFrom 
覆写中附加和解除该事件处理程序。 

PrintTaskRequested 事件处理程序是执行简单打印的程序所需 5 种回调方法和事件处理 
程序中的一种。五个方法均为必需。此外，甚至在 PrintTaskRequested 事件激活之前，程序 
就需要创建 PrintDocument 对象，并附加三个事件处理程序，以做好打印准备。 

我们来看一个完整的程序，该程序会打印-•个一页文档，包含一个 TextBlock (上面写 
着 “ Hello , Printer !” ）。 HelloPrinter 项目中的 XAML 文件在程序逻辑中并没有起作用，而 
只是通知新用户如何打印内容。 

项目 ： HelloPrinter 丨文件： MainPage.xaml ( 片段 > 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock FontSize-"48" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

TextAlignment="Center M > 

Hello, Printer! 

<LineBreak /> 




代码隐藏文件定义了三个字段，其中之一就是该程序要打印的 TextBlocko 

项 H:HelloPrinter 丨文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 



IPrintDocumentSource printDocumentSource; 

// UIElement to print 
TextBlock txtblk - new TextBlock 
{ 

Text = "Hello, Printer!", 

FontFamily = new FontFamily("Times New Roman"), 
FontSize = 48, 

Foreground * new SolidColorBrush(Colors.Black) 


PrintDocument 对象表示应用要打印的东西。一般情况卜'，程序只创建一个 
PrintDocument 对象，并用 P —个打印任务 。在 某些情况下，程序…以维护多个 PrintDocument 
对象，可能一个打印整个文档，另一个打印文档大纲，第二个打印缩略图，但不要为每个 
打印任务创造新的 PrintDocument 对象。（正如你会看到的，请求打印任务的时候，根本来 
不及创逑 PrintDocument! ) 如果方便.可以从 PrintDocument 派生类，用来封 装一叫 打印逻 
辑，但在 PrintDocument 中没有要覆写的东叫。 

对于处 理中一 文档类型的程序，你可能会像我一样把 PrintDocument 和 
1 PrintDocumentSource 定义为字段炎划并在程序初始化过程中创建 PrintDocument 对象。 

项冃： HelloPrinter 丨文件： MainPage.xaml.cs ( 片段） 
public sealed partial class MainPage : Page 
{ 

public MainPage() 

{ 

this.InitializeComponent(); 

// Create PrintDocument and attach handlers 
PrintDocument * new PrintDocument<>; 
printDocumentSource = printDocument.DocumentSource; 

PrintDocument.Paginate += OnPrintDocumentPaginate; 
printDocument.GetPreviewPage += OnPrintDocuroentGetPreviewPage; 
printDocument.AddPages += OnPrintDocumentAddPages; 


第：个字段 I PrintDocumentSource 类杷的对象从 PrintDocument 对象 获得。 此外， 
PrintDocument 定义的三个事件都耑要处理程序。这些事件处理程序负责提供贞面计数以及 
在打印预览和打印过程中的实际页数。 

HelloPrinter 程序在 OnNavigatedTo 期间为 PrintManager 的 PrintTaskRequested ‘打件附 
加車件处理程序，并且在 OnNavigatedFrom 期间将其解除，在第一种情况卜使用两个语句， 
而在第.个情况 F 的使用一个带一点变化的语句。 

项 H:HelloPrinter 丨文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
1 

protected override void OnNavigatedTo(NavigationEventArgs args) 
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// Attach PrintManager handler 

PrintManager printManager = PrintManager.GetForCurrentViewO; 
printManager.PrintTaskRequested ■♦= OnPrintManagerPrintTaskRequested; 



protected override void OnNavigatedFrom(NavigationEventArgs 
( 

// Detach 


handler 

).PrintTaskRequested . 


: CJjPrint^tenagerPrintTaskBequested; 



?.OnNavigatedFrom(e); 


在真实的程序中，如果程序能够打印，就附加此处理程 序。 如果+耑要打印，就解除 
处理程序。 

如果程序匕经附加该处理程序并且用户手指从屏嵇右侧滑过，选样 Device . 则调用 
PrintTaskRequested If 件处理程序◊以卜是响应该事件的的标准方式。 


H : HelloPrinter I 文件 : MainPage.xaml.cs { 片段 } 
void OnPrintManagerPrintTaskRequested (PrintManager 


: .CreatePrintTask(" 


Printer", OnPrintTaskSourceRequest* 


ntArgs 
ed); 


PrintTaskRequested 車件的事件参数包括 Request 类型属件，程序通常调用 Request 对 
象的 CreatePrintTask 方法来做出响应，并向其传递打印任务名称 (" J •能会是应用名称或由应 
用要打印的文档名称)以及回调函数。 CreatePrintTask 方法返回 PrintTask 对象，似通常没冇 
必要保留该对象。 


Windows 8显示打印机列表。下图为屏幕上的内容(不同的屏幕1二可能有所不同 h 



唯一的、真正的打印机在列表中位列第一。后两个将打 印输出 保存为文件。 最后 一个 
不是打印机，妃買的是连接到平板电脑上的第：个显尔器。 

如果用户选择列表中的任意一项，则调用我命名为 OnPrintTaskSourceRequested 的回调 
函数。在最简 中的 情况 K , 处理程序 " m 迎过调川货件参数的 SetSource 做出响应，并将 V . 
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先从 PrintDocument 对象获得的 IPrintDocumentSource 对象中传递给 SetSource 。 

R :HelloPrinter | 文件： MainPage.xaml.es ( 片 段） 
void OnPrintTaskSourceRequested(PrintTaskSourceRequestedArgs args> 

{ 

args.SetSource(printDocumentSource); 

) 

该方法将控制返回给 Windows , 并 M 示一个打印机特定窗格(见 K 阁)。 



屏洁顶部的打印机名称宥起来吋能有些 奇怪。 这台特定打印机实际并没有连接在我 I : 
作的平板电脑 h . 而是连接到我家客房 .41 的电脑，我在客房写木章节的内容，而你 所看到 
的就是这台计算机的一部分名称。 

右 h 框用丁•指定打印份数，卜拉框 " J " 以选择打印纸张 ( Portrait 或 Landscape )。 这些都是 
打印 机的标准设(对 T Send To OneNote 2010和 Microsoft XPS Document Writer 选项， 
该区 域只敁示 Orientation 选项。）按卜' More settings 按钮， kT 以选样页面大小以及一些打印 
机特定选项。 

左侧窗格是打印豇而 M 览。 如果文档有多个页面，则吋以 M 过下方的选择框来选押需 
要丧看的豇面。贞而预览为 FlipView 控件，从一边扫到另一边最简单。 

总豇数来自 Paginate It 件的处观程序， Paginate 事件是 PrintDocument 定义的 '个#件 
之一。所有三个事件的处理程序都附加在 MainPage 构造中。在 HelloPrintei •中， nj ■以直接 
如下实现 Paginate 处理 程序。 



Page, xan 
(object 


“ 片段） 

ler, PaginateEventArgs args) 




M 过 Paginate 处理程序，应用 " j 以 准备好所有需耍打印的豇面，然; H •调用 PrintDocument 
方法，以迠示有多 少豇并 表明这是初步 il 数还是敁终 il •数。（如果•能或宥不方便一次性 
进行所有 T . 作，情况会更复杂一些。） 

PrintDocument 定义的 GetPreviewPage It 件的处理程序提供打印!预览而且也在 
Mainpage 构造函数中设 W . 较咕。 







项 H 


( 片 段 } 





事件参数的 PageNumber 属性为基于1，并且其 范围从 1 到 SetPreviewPageCount 调用 
所指定的数最。对丁•本特定程序， PageNumber 总是等丁 • 1。程序通过调用 PrintDocument 
的 SetPreviewPage 方法来响应该事件，并将页面以及我定义为字段的 TextBlock 传递给 
SetPreviewPage 。 这就是在打印预览中显示的东西。 

按下 Print 按钮，调用最后一个事件处理程序。 

项 H:HelloPrinter | 文件： MainPage.xaml.cs ( 片段〉 

void OnPrintDocumentAddPages(object sender, AddPagesEventArgs args) 

( 

printDocument.AddPage(txtblk); 
printDocument.AddPagesComplete(); 


AddPages 事件的处理程序负责为文档每一页调用 AddPage 。 通常情况下，传递给 
SetPreviewPage 方法的对象都相间，但如果你希望，也可以让这些对 象有所 不同。程序最 
后调用 AddPagesComplete 。 打印窗格消失，（运气好的话)你会听到熟悉的打印卢。 

注意！ Paginate 处理程序可以多次调用，尤其是用户开始处理各种打印机选项的时候。 
如果程序实际 h 做了大量工作 来分员 文件，而目.页面的实际布局不会改变，你叮能不想重 
复调用。在真实的程序中，一般在 Paginate 处理程序运行时，你会将所有页面集中到 List 
对象中，然后交付给 GetPreviewPage 和 addPages 处理程序。 

HelloPrinter 打印的 TextBlock 被指定48的 FontSize 。 如果显心在小冋尺、 j _ 和分辨率的 
视频 显示 器上， TextBlock 的大小叮能会有稍微不冋。但打印的时候，48的 FontSize 是一 
种精确测景，意味着48/96英寸，即半英寸或36点。 

注意，我把 》] 打印 TextBlock 的 Foreground 属性指定为黑色。由丁-程序采用黑色主题， 
默认 Foreground 属性为 白色， 如果没有明确的 Foreground 设罝， TextBlock 会获取默认值， 
而在白纸 h 就 W . 示不出来。这种 It 情会让你困惑好几天！处理打印机代码的时候，养成习 
惯(使用红色和蓝色等颜 色)， 会帮助你减少打印白色字的机会。 

如果检杏 HelloPrinter 中的代码，你 n ; 能会觉得有一些方法可以简化。例如，你对能认 
为不耑要一幵始就创建 PrintDocument 并将其保存为字段。可以直接在 
OnPrintTaskSourceRequested 方法屮创雄 PrintDocument , 设置三个事件处理程序，然 / Ti 提 
取 IPrintDocumentSource 对象。小同 PrintDocument 件处理程序" I 以从 sender 参数访问 
PrintDocument 。 

但这是行不通的。需要在用户界面线程创建并访问创建 PrintDocument , 而 
Pri ntT ask Requested 处理器和我命名为 OnPrintTaskSourceRequested 的回调函数并不在用户 
界血线程运行。想调用 PrintTaskRequested 事件来创建 PrintDocument , 为时 l ! 太 晚了。 


17.5 可打印边距和不可打印边距 


即使我谋慎设置了用®色打印 TextBlock , 似我的打印机还是尤法正确打印，而且可能 
你的打印机也七法 ll : . 确打印。 TextBlock 和 ft 面左 L 角直接对齐，而大多数打印机根本无法 
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达到纸边缘，也就是说.一部分文本会被 W 掉。 

如果尝试通过把 TextBlock 的 Horizontal Alignment 和 Vertical Alignment 属性设 -S 为 
Center 来解决该问题.你会发现此时这些厲性根木没用。对齐值是相对于父元素的，而 
TextBlock 却没有父元素，因为它是打印机页面上的顶层 元素。 由于同样原因， Margin 也 
没用。然而，设 H TextBlock 的 Padding 属性有用，因为这是 TextBlock 处现程序本身的 
事情。 

一个史好的通用解决方案是把毎个打印机贞面变成一个坷视树，该"〗视树以顶层 
Border 元素开头。打印时. Border 占据整张纸，但 Border 可以包括非零 Padding 属性，该 
厲性能够有效地为 整个页 l ( U + 提供边距。 

PaginateEventArgs fll AddPagesEventArgs 都包括 PrintTaskOptions 类型的属性，名为 
PrintTaskOptions 。 该对象的大多数属性都对应打印机_性.用户吋以手动设黃。这些诚性 
的名称像 Collation 、 NumberOlXTopies、Orientation 和 PrintQuality 。 程序 Kf 以访问这啤厲性 
以定制打印，似通常并不是 必须。 木章稍; ri 展示程序如何初始化这些属性，并添加一些& 
定义选项。 

PrintTaskOptions 还有一 个名为 GetPageDescription 的 方法。 假设每个页面均为小同大 
小，参数就是蜗』'•零的页码。该方法返冋的 PrintPageDescription 结构有 DpiX 和 DpiY 属性， 
会报告打印机的实际分辨率(值通常为600或 1200) 以及以1/96英十为中.位的 Size 类甩的 
Pagesize 。 对于大小为8 1/2 X 11 的美国标准竖排信纸, PageSize 属性为816和1056。 

PrintPageDescription 结构还包括 Rect 类型的 ImageableRect 属性，该属性表示打印机能 
够实际打印的员面矩形区域。对于我的打印机 I •.的信件尺寸纸张，该矩形的左上角为 
(120.481 10.35748)， 尺寸为 (791.04,9880.1575), 均已 1/96英寸为单位。与 816 X 1056 的 
PageSize 比较一 V 。执行一叫减法，你会得出结论，即打印机无法打印在左右边缘的 12.48 
个单位、顶部 11.35748 个单位以及底部的 56.48502 个单位。在横排模式中， Pagesize 和 
ImageableRect 反映出 Ktfri 的特定方位。 

我们来符符这些数字有多么精确。 PrintPrintableArea 程序在 XAML 文件;明了其名称。 

项 FI:PrintPrintableArea 丨义件： MainPage.xaml ( 片段） 

<Grid Background='' {StaticResource ApplicationPageBackgroundThemeBrush)"> 

<TextBlock Text-"Print Printable Area" 

FontSize="24" 

HorizontalAlignment="Center" 

VerticaIAlignment= w Center M /> 

</Grid> 

代码隐藏文件的结构非常像 HelloPrinter , 只不过程序耍打印的颜色较多，包括红色背 
景的 Border 、 I ' l 色背设和黑色轮廓嵌套的 Border 以及居中的 TextBlock „ 

你还会注总到，我没有定义传递给 CreatePrintTask 方法的单独冋调方法，而将其定义 
为匿名 lambda 函数。这是一种常见做法，似对于更复杂的打印逻辑，我不会固执地采用 
这种做法。 

: PrintPrintableArea I 文件： MainPage. xaml .cs •段） 

public sealed partial class MainPage : Page 


PrintDocument printDocument; 
IPrintDocumentSource printDocuinentSource; 


•rBri 



protected override voia unwavigateatronMNavigaciontventArgs ej 

i 

// Detach PrintManager handler 

PrintManager. GetForCurrentView (). PrintTaskRequested -= OnPrintManagerPrintTaskRequested; 
base.OnNavigatedFrom(e); 

} 

void OnPrintWanagerPrintTaskRequested (PrintManager sender, PrintTaskRequestedEventArgs args) 

args.Request.CreatePrintTask("Print Printable Area", (requestArgs) *> 

{ 

requestArgs.SetSource(printDocumentSource); 

})； 

) 

void OnPrintDocumentPaginate(object sender, PaginateEventArgs args) 

{ 

PrintPageDescription printPageDescriptlon = args.PrintTaskpptions.GetPageDescription(0); 
// Set Padding on outer Border 


ab 

ieS: 


Le ： 
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void OnPrintDocumentGetPreviewPage(object sendee, GetPreviewPageEventArgs args> 

{ 

printDocument.SetPreviewPage(args.PageNumber f border); 

} 

void OnPrintDocumentAddPages(object sender, AddPagesEventArgs args) 

( 

printDocument.AddPage(border); 
printDocument.AddPagesComplete(); 

} 

) 

另一个 JiA 著区别是 PrintDocument 的 Paginate 事件处理程序。处理程序获得 
PrintPageDescription 结构并计算出 Padding 值，并应用于所打印元素的外 Border 。 正如你所 
肴到的，打印预览 W 示一貞到纸张边缘的外边框红色背景(见下阁>。 



敁尔预览时，试试在 Portrait 和 Landscape 之间进行切换。毎次变化都会引起冉次调用 
Paginate 处理程序并重新计算外边框的 Padding 值。 

打印预览显然没有反映出打印到纸张边缘时的打印机限制。否则，红色区域将不可见。 
我很卨兴地发现实际打印出来的的 豇面砧 示黑色内边框没有问题，只是带了一点点外 
Border 的红色背技痕迹，这表明打印机的 ImageableRect 值是精 确的。 

虽然打印图片和其他位图的程序 吋能想 适应页面打印，但大多数打印程序都会设 R 较 
大的页边距(或许一英寸左右)，或者为同定尺寸，或者由用户自定义。在这些情况卜％通 
常都没有必要访问 ImageableRect 属性。 

接卜 来我会 举一个用户自定义页边距的 例子。 

17.6 分页过程 

—般情况 K , Windows 应用能够打印很多页，数徵取决丁 •许多 W 素，例如文档长 
度字号、纸张尺寸、页边距以及! Kiln 竖排或横排模式。 

Paginate 屯件处现程序的14的.不仅要准备好页面预览和打印，而民还耍统计文档奴 
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数。某些情况 K ， 分页吋能需要一段时间，有一些办法能避免立刻完成分员，但如果能立 
刻完成分页，就是 最简中 •的。 

我们歌新运行第4章的 DependencyObjectClassHierarchy 程序，并对其增加打印选项， 
以此来检杳一个相当短的分豇任务。你吋能还记得， DependencyObjectClassHierarchy 为每 
个 DependencyObject 派生类 都创建 TextBlock ， 并都放入 Scroll Viewer 的 StackPanel 。 
PrintableClassHierarchy 程序的 XAML 文件和以前的版本一样。 

项目 ： PrintableClassHierarchy 丨文件： MainPage.xaml ( 片 • 段） 

<Grid Background®"(StaticResource ApplicationPageBackgroundThemeBrush J"> 

<ScrollViewer> 

<StackPanel Name="stackPanel" /> 



我还决定采用含 TextBlock 子元素的 StackPanel 来用丁 •打印，但有一个木质的区别： 
对于屏幕，只有一个 StackPanel , 因为它在 ScrollViewer 中。而对； T 打印，每负都必须有 
StackPanel . 而月.叙面只包含 TextBlock 元#。 

对屏辂和打印机使用相同的 TextBlock 元索很简单。理论上讲， 可以打 印已经砧示在 
屏幕上的元素，但就我的经验而言，这种方法并没有如期真正实现。有一个主要的限制， 
即特定元素+能有两个父类。在木例中，所打印的 TextBlock 必须是打印机页面的 Stack Pane 
子元索，因此，不能冋时是屏蘇 I : StackPanel 的子元素。 

因此， 类层次结构的程序的修订版本会创建 TextBlock 元索的中.独粮体集合并存储在 
名为 printerTextBlocks 的宁- 段中 。 Mainpage 类的这部分 1 j ' DependencyObjectClassHierarchy 
中的代码隐藏文件 I - 分相似，只+过 TextBlock 代码被分成单独的各个方法，以利 j -创建 
TextBlock 元素的两个平行 集合。 注意，打印机 TextBlock 元索在 DisplayAndPrinterPrep 方 
法中(屯命名自先前的 Display 方法)己指定了明确的®色 Foregroundo 程序片段中没有砧水 
大多数打印支持。 


FI : PrintableClassHierarchy I 文件： MainPage.xaml.es { 片段） 
public sealed partial class MainPage : Page 

l 

Type rootType = typeof(DependencyObject); 

Typelnfo rootTypelnfo = typeof(DependencyObject).GetTypelnfo(); 
List<Type> classes = new List<Type>(); 

Brush highlightBrush; 

// Printing support 

List <TextBlock> printerTextBlocks = new List<TextBlock>(); 
Brush blackBrush = new SolidColorBrush(Colors.Black); 

public MainPage() 



highlightBrush = 

new Sol idColorBrush (new UlSettings () .UIElementColor (UIElemencType. Highlight)); 


// Accumulate all the classes that derive from DependencyObject 
AddToClassList(typeof(Windows.UI.Xaml.DependencyObject)); 

// Sort them alphabetically by name 
classes.Sort((tl, t2)=> 

( 

return String.Compare(tl.GetTypelnfo().Name, t2.GetTypelnfo0.Name); 



DisplayAndPrinterPrep(rootClass, 0); 


void AddToClassList(Type sampleType) 

{ 

Assembly assembly = sampleType.GetTypelnfo().Assembly; 

foreach (Type type in assembly.ExportedTypes) 

{ 

Typelnfo typeInfo 二 type.GetTypelnfo(); 

if (typelnfo.IsPublic 6 & rootTypeInfo.IsAssignableFrom(ty 
classes.Add(type); 

} 

} 

void AddToTree(ClassAndSubclasses parentClass, List<Type> classes) 

{ 

foreach (Type type in classes) 

I 

Type baseType = type.GetTypelnfoO.BaseType; 

if (baseType = pa rentelass.Type) 

{ 

ClassAndSubclasses subclass = new ClassAndSubclasses( 
parentClass.Subclasses.Add(subclass); 

AddToTree(subclass, classes); 


void DisplayAndPrinterPrep(ClassAndSubclasses parentClass, int indei 

Typelnfo typelnfo = parentClass.Type.GetTypelnfoU; 

// Create TextBlock and add to StackPanel 

txtblk = CreateTextBlock(typelnfo, indent); 

1.Children.Add(txtblk); 


TextBlock 








foreach (Constructorlnfo constructorlnfo 
if (constructorlnfo.IsPublic) 

publicConstructorCount += 1; 


(pub 

txt 


licConstructorCount = 

: tblk.Inlines.Add(new 

Text - •• (non-ir 
Foreground = highlightBrush 


txtblk; 


打印支持的剩余部分与你以前看过的很相似，除非耑要打印很多! S 。 Paginate 方法发 
挥作用，将格成化员面存储到 printerPages 字段。每个对象均为 Padding 值设置为 ％(1 英 、 J 
的)的 Border 以及带页面等丁•早先创建的 TextBlock 元蒺的子 StackPanel 。 

请记住，如果用户切换 Portrait 或 Landscape 模式、信件或 Legal 页大小， Paginate 处 
理程序 u ] •能会多次调用。由于程序要处理 TextBlock 元素固定集合，而且禁止元素有多軍 
父级，因此，要确保所有 TextBlock 元索都不是以前创建的 StackPanel 的子犯，它对 Paginate 
方法非常重要。 


public seal 


jleClas 
ed par 


文件： MainPage. > 
class MainPage : Page 


“片段 > 


PrintDocument printDocument; 

IPrintDocumentSource printDocumentSource; 
List<UIElement> printerPages = new List<UIElement>(); 

public MainPage() 


// Create PrintDocument and attach handlers 
printDocument = new PrintDocument(); 
printDocumentSource = printDocument.DocumentSource; 
printDocument.Paginate += OnPrintDocumentPaginate; 
printDocument.GetPreviewPage += OnPrintDocumentGetPreviewPage; 







// Verbosely set some variables for the page margin 
double leftMargin = 96; 
double topMargin ■ 96; 
double rightMargin = 96; 













void OnPrintDocumentAddPages(object sender, AddPagesEventArgs args) 


foreach (UIElement printerPage in printerPages) 
printDocument.AddPage(printerPage); 

printDocument.AddPagesComplete(); 

) 

分贞策略涉及把纸页高度各减去顶部和底部丨英十页边距，汁 算得出 maxPageHeight 
值。每个 TextBlock 都添加到该赵面的 StackPanel , 而另一个名为 pageHeight 的变贷 也会增 
加。方法对每个 TextBlock 都调用 Measure 方法并计算其大小,如果 TextBlock 高度加上 
pageHeight 会超过 maxPageHeight 值，则耑要_ ■■个 新 ！ U rtlj 。 

GetPreviewPage 处理程序使用車+件参数中雄丁 • 1的 PageNumber 属性来访问 printerPages 
列表中的相应元索。 AddPages 处理程序对所有沉而都调用 AddPage 。 

在下图所水的预览中，可以在打印整张列表之前检忾小同页面。 



你吋能已经注总到，分奴逻辑基丁•每个 TextBlock 高度來增加 pageHeight , 如下所示： 

pageHeight += Math.Ceiling(txtblk.ActualHeight); 

我一开始没有用 Math . Ceiling 调用。默认 FontSize 为11, ActualHeight 值为 13.2, 有 
了这两个值，程序会赋予每个 Sta C kPand 65 行文本，使其 M 示在竖排模式的9英寸内。然 
而，预览并打印出来后,只有62行可见。所得 StackPanel 比分配给它的空间要大,用于堆 
叠 StackPanel 中文本的行间距明显大_』： 13.2, W 此导致每! K 都会剪掉3个 TextBlock 元素。 

此时使用 Math . Ceiling 会导致毎豇有61行文％有点朝另外方向偏离， 但罕少 文本+ 
会消失。 

+过，这确实有点奇怪。当然，在视频敁示器中将像桌•边界 W 文本对齐，对可读性而 
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自-具有十分電要的意义，这就是为什么坐标会四舍五入到下—个最高像索。然而在打印机 
上，毎英寸也有600像索(或左右)，因此，四舍五入不需要基于96 DPI 的设备。 

分 奴非常 复杂，尤其是涉及文木时。元素没有准确出现在你希望它在打印机豇上的位 
K , 如果 K ; 期遇到该问题，你可能想切换到使用 Canvas 。 对于复杂文本布局， Glyphs 比 
TextBlock 史流行，而如果使用 Glyphs 遇到困难，你能会想探 i、t Direct Write 并谊染到屏 
幕和打印机页上。 

如果你喜欢另一个方向（通过 Windows Runtime 来确定如何显示文本），使用 
RichTextBlock (第16章的主题 )! 叮能有用。 


17.7 自定义打印属性 


PrintableClassHierarchy 中的英寸边距为硬编码。假设想让用户 uj 以选择贞边距。我 
们来给用户设置打印字体大小的选项。 

自定义打印机设黃 1(11 板并小复杂，还 " I ■以让 Windows Runtime 负责创建合适的控件和 
管理输入的大部分工作。 

自定义是在 PrintManager 的 PrintTaskRequested 事件处理程序中完成的。该处理程序 I I 
前如 K 所示： 



nCManager 
Print Ta 


args) 

OnPrintTaskSourceRequested); 


或荇也 4 以作为匿名 lambda 函数用于 回调: 


void 


OnPrintManagerPrintTaskFequested(PrintManager sender, PrintTaskRequestedEventArgs args) 
args.Request.CreatePrintTask("My Print Task Title", (requestArgs)=> 



无论采用哪种方式， CreatePrintTask 调用都会实际返回 PrintTask 类型的对象，使其可 
以保存到局部 变量： 

void OnPrintManagerPrintTaskRequested (PrintManager sender, PrintTaskRequestedEventArgs args) 



通过 wj •能习以为常的循环静态调用，从 PrintTask 对象吋以得到 PrintTaskOptionDetails 
类型的 对象: 

PrintTaskOptionDetails optionDetails = 

PrintTaskOptionDetails.GetFromPrinCTaskOptions(printTask.Options); 

PrintTaskOptionDetails 和相关类均在 Windows . Graphics . Printing.OptionDetails 命名空间 

中进行定义。 

如果愿意，你可以删除打印机设置血板中的第-奴内的所有 选项： 


optionDetails.DisplayedOptions.Clear(); 
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现在看不到改变拷贝数世或横竖排的 选项。 当然也可以选择把这些设貿还原，也许通 
过相反的 顺序： 


optionDetails•DisplayedOptions.Add(StandardPrintTaskOptions.Orientation} ; 
optionDetails.DisplayedOpcions.Add(StandardPrintTaskOptions.Copies); 


StandardPrintTaskOptions 是一个静态类，并且属性代表用字符串 1 D 进行识别的标准打 
印机选项。 StandardPrintTaskOptions.Orientation 实际上是字符串 PageOrientation ， 
StandardPrintTaskOptions.Copies 是字符串 “ JobCopiesAllDocuments ” 。如果适合，你可以 
初始化这些 选项： 


optionDetails.C 


PrintOrientation.Landscape); 


.TrySetValue( 


PrintOrientation 是 Windows . Graphics.Printing 中的 11 个类似枚举之一。 
如果认为适合，则可以添加一个不太常见的 选项： 


optionDetails.! 


3 .Add(StandardPrintTaskOptions.Collation); 


也可以添加你 自 己的选项。仅限于两种类型的自定义 选项： 文木字段或类似 Orientation 
选项的选项扩展列表。 

我们来创建一个新项目为 CustomizableClassHierarchy 。 程序和 PrintableClassHierarchy 
大同小异，但一些自定义值被定义为字段.这些字段初始化为程序认为合适的值。 


项目 ： CustomizableClassHierarchy I 文件： MainPage. 
public sealed partial class MainPage : Page 


double leftMargin = 96; // 
double topMargin - 72; // 
double rightMargin = 96; 
double bottomMargin = 72; 


这些字段通过 PrintManager 的 PrintTaskRequested 事件处理程序进行访问。用户点击 
ices 按钮(可能是在选择打印机的过程 中)， 则触发该事件。 


项目 ： CustomizableClassHierarchy 丨文件： MainPage. > 
void OnPrintManagerPrintTaskRequested(PrintManager s 


华.•出•二 
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optionDetails.CreateTextOption("idTopMargin", "Top margin (in inches}"); 

optionDetails.DisplayedOptions.Add("idTopMargin"); 

optionDetails.Options["idTopMargin"J-TrySetValue((topMargin / 96).ToStringO); 

optionDetails.CreateTextOption("idRightMargin", "Right margin (in inches)"); 

optionDetails.DisplayedOptions.Add("idRightMargin"); 

optionDetails.Options("idRightMargin").TrySetValue((rightMargin / 96).ToString()); 

optionDetails.CreateTextOption("idBottomMargin", "Bottom margin (in inches)"); 

optionDetails.DisplayedOptions.Add("idBottomMargin"); 

optionDetails.Options("idBottomMargin"J.TrySetValue((bottcxnMargin / 96).ToStringO); 

// Set handler for the option changing 

optionDetails.OpcionChanged += OnOptionDetailsOptionChanged; 

) 

每个自定义选项至少需要两个步骤，也吋能是三个步骤。首先必须创建选项，在此过 
程中，指定其 ID 字符串以及 Hi 现在打印机设賈面板中的标签。然后把自定义项添加到 
DisplayedOptions 粜合。第-个步骤 "] •选，但要设1初始值。在我的代码中，存储这些值的 
字段由像素转换成点(用于字体 大小) 和英、 t (用于边界 值)。 

该方法 fid OptionChanged 黎件设貿車件处理程序。该屯件触发用 P 更改所有打印 
机的选项 I 而不仅是自定义选项。对于-如下图所示的的文本项，不会毎个按键都触发该事 
件，而只有按 K Enter 键、丢失输入焦点或按 F Press 按钮的时候才触发。卜_图所示为自定 
义设菁面板。 



有没有看到五个新项0 ?我知道这肴 起來己 经超越 G 定义选项的可用大小限制，但列 
表吋滚动。 

以卜为 OptionChanged 車件处邢程序的实现。这见进行验证并发出信号， 表明耑 要用 
新估刷新打印预览，與次调用 Paginate 处理程序。 PrintTaskOptionChangedEventArgs 类只 
定义一种诚性，即 object 类型，名为 Optionld (但的确是字符中)，表明所改变选项，但也需 
要用到 sender 参数。也就是在 PrintTaskRequested 处观程序 N 定义过程中所使用的 
PrintTaskOptionDetails 对象。 


S*A\\ : CustomizableClassHierarchy | 文件： MainPage.xaml.es ( 片 段） 

async void OnOptionDetailsOptionChanged(PrintTaskOptionDetails sender, 

PrintTaskOptionChangedEventArgs aegs} 












sender.Options[optionld].ErrorText = errorText; 

// If there's no error, then invalidate the preview 
if (String.IsNullOrEmpty(errorText)) 

( 

r.RunAsync(CoreDispaccherPriority.h 
printDocument.InvalidatePreview(); 


如果其中一个选项的输入出/问题，就耑耍为该选项把 ErrorText 厲性设 H 为简短但有 
用的文本字符串。该字符串向用户•为红色。如果设任何选项的 ErrorText , 则馇用 
Print 按钮。效果如下图所示。 

























i # 注怠，错误消息卜 ifii 的事件进行了 F 移。如果你提供的错误信息多于一行，则折行。 
如果没有错误，则调用 PrintDocument 对象的 InvalidatePreview 方法。请注意， 志耍 
CoreDispatcher 以强制该调用发牛:在用户界面线程。 OptionChanged 处理程序运行在辅助 
线程。 

InvalidatePreview 调用导致对 Paginate 触发新的 Paginate 讲件。新版本的 Paginate 处理 
程序通过获取所有自定义值并将其转换成可用数字。字体大小应用于所有要打印的己存储 
TextBlock 元素，使用该方法旧版木中的页边距值。 

项 H:CustomizableClassHierarchy I 文件： MainPage.xaml.es 《片段 > 
void OnPrintDocumentPaginate(object sender, PaginateEventArgs args) 

( 

// Get values of custom settings 
PrintTaskOptionDetails optionDetails - 

PrintTaskOptionDetails.GetFromPrintTaskOptions(args.PrintTaskOptions); 
fontSize ^ 96 * Ctouble.Parse(optionDetails.Cptions["idFontSize").Value.ToString()) / 72; 
leftMargin = 96 * Double.Parse(optionDetails.C^)tions["iclLef cMargin"].Value.ToString()); 
topMargin = 96 * Double.Parse{optionDetails.Options{"idTopMargin"J.Value.ToString()); 
rightMargin = 96 • Etouble. Parse (optionDetai Is. Cations ["idRightMargin"]. Value.ToStr ing ()); 
bottenttergin = 96 * Double. Parse (c^JtionDetai Is .Options [ "idBottcfTtfargin" ]. Value .ToStr ing ()); 



txtblk.FontSize = fontSize; 


如果冉多做一点工作，就吋以检杏用户输入的豇边距值足够高，以避免文字出现在+ 
吋打印区域。在 OptionChanged 处理程序中，很容易从 PrintTaskOptionDetails 对象访问豇 
面描述： 

Rect imageableRect = sender.GetPageDescription(0).ImageableRect; 


17.8 打印每月计划 

有时，如果要进行一个长期项目,我喜欢打印月历并贴到墙上。这些日历不需要任何 
花哨功能.它只需耍有大最空白能够用来写每天的求情。 

PrintMonthlyPlanner 程序的唯 一 U 的是打印用户所指定范围的11历。主豇如卜阁所示。 
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月份和年份通过 FlipView 控件来选抒。只有开始月份小于或等于结束 Jj 份时，才会启 
用该按钮。按钮的 Click 处理程疗•只需要-行代码： 


尽管用户一般都会调用超级按钮和 Devices 锐格，程序也4以这样做。-般情况下， 
此选项会保留给只在特殊场合打印的程序，例如 Print Ticket Confirmation 。 有趣的是，调用 
ShowPrintUIAsync 带来的窗格 U Devices 按钮略有+同(见 H )。 



PrintMonthlyPlanner 程序专门用于打印,因此，要打印的页面并不由程序显示，只在 
屏幕上的打印窗格中可见，如卜图所水。 



请注总， Orientation 设 S 为 Landscape 。 假设横排! ii 面的 fcJ 历效果更好，程序匕经设咒 
了这个初始值。每页都打印到叮打印边距非常靠边的地方。 

我创建了一个自定义控件，用户可以选择份和年份。该空间称为 MonthYearSelect , 
XAML 文件揭冶了两个模板化的 FlipView 控件，•.者都有作为 hemsPanel 的 StackPanel 。 

项目： PrintMonthlyPlannei: | 文件： MonthYearSelecc.xaml (W'S) 

<UserControl ... > 

<UserControl.Resources 〉 

<Style TargetType="FlipView"> 









〈Setter Property*"ItemsPanel M > 

<Setter.Value> 

<ItemsPanelTemplate> 

<StackPanel Orientation="Vertical" /> 



</Setter.Value> 

</Setter> 

<Setter Property="ItemTemplate"> 

<Setter.Value> 

<DataTemplate> 

<TextBlock Text="{Binding}" VerticalAlignment-"Center M /> 
</DataTemplate> 

</Setter.Value> 

</Setter> 

</Style> 

</UserControl.Resources> 

<Grid> 

<StackPanel Orientation*"Horizontal"> 

<FlipView x : Name="monthFlipView" 

SelectionChanged="OnMonthYearSelectionChanged" /> 

<TextBlock Text= "& »xOOAO; M /> 


<F1ipView 

</StackPanel> 

</Grid> 


<: Name="yearFIipView" 

SelectionChanged="OnMonthYearSelectionChanged'' 


为了能部分利用 Windows Runtime 的新功能，我决定把对该类的公共接口做成 Calendar 
对象，而不是传统的 .NET DateTime 。 我希望该程序适用于任何类型的日历，但 Calendar 
类似乎并没有超越于标准格里高利历法。我甚至找不到一种方法来确定每星期的第一天应 
该是星期天(大多数地方的 标准) 还是星期 一( 例如在法国>。 

我还发现， Calendar 是一个类而不是一个结构，这会困扰我随 FlipView 每次旋转而创 
建新的 Calendar 对象。我决定，控件只创建一个 Calendar 对象并可以更改该单个对象的 
Month 和 Year 属性。但在这种情况下，不能把 Calendar 显示为一个从属属性，从属属性是 
带控件的，所以 Calendar 类型的属性就是一个普通的老属性，名为 Month Year , 并由 
MonthYearChanged 事件进行补充 (表明 Month 或 Year 新值)。 

项目 ： PrintMonthlyPlarmer 丨文件： MonthYearSelect.xaml.es ( 片段 } 
public sealed partial class MonthYearSelect : UserControl 
{ 

public event EventHandler MonthYearChanged; 


public MonthYearSelect() 

{ 

this.InitializeComponent(); 


// Create Calendar with current date 
Calendar calendar = new Calendar(); 
calendar.SetToNow(); 


// Fill the first FlipView with the abbreviated month names 
DateTimeFormatter monthFormatter = 

new DateTimeFormatter(YearFormat.None, MonthFormat.Abbreviated, 
DayFormat.None, DayOfWeekFormat.None); 


for (int month = 1 ; month <■ 12; month++) 




ateTimeOffset (2000, 


h, 15, 0, 0, 0, TimeSpan. Zero)); 


monthFlipView.Items 


i(strMonth); 


// Fill the second FlipView with years (5 years before current, 
for (int year - calendar.Year - 5; year <- calendar•Year + 25; 


25 after) 
year++) 


yearFlipView.Iterns.Add(year); 


// Set the FlipViews to the current month and year 
monthFlipView.Selectedlndex = calendar.Month - 1; 
yearFlipView.Selectedltem = calendar.Year; 
this.MonthYear = calendar; 


public Calendar MonthYear { private set; get; 




<i. SelectedI ndex 


// Fire the event 
if (MonthYearChanged !- null) 

MonthYearChanged(this, EventArgs.Empty); 


MainPage.xaml 文件实例化两个 MonthYearSelect 控件 c 


项目 : PrintMonthlyPlar 
<Page ... 

FontSize="48"> 


文件： MainPage.xaml< 片段） 


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
<Grid HorizontalAlignment="Center" 

VerticalAlignment»"Center w > 

〈 Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Auto" /> 

<ColumnDefinition Width-"*" /> 

<ColumnDefinition Width="Auto" /> 

〈 /Grid.ColumnDefinitions 〉 


<Grid•RowDefinitions> 
<RowDefinition He 


^ - 


Grid.Row= M 0" Grid.C 
VerticalAlignment=' r 
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VerticalAlignment="Center" 
MonthYearChanged =,, OnMonthYearChanged" /> 


<Button Name="printButton" 



</Grid> 

</Page> 

该程序与本章其他程序有一些不同，打印功能在应用运行过程中不可用。只有两个 
MonthYearSelect 控件达到月份的有效范围，打印功能才启用。随着这两个控件的每一次变 
化，程序需要为 Button 创建新标签，决定是应该启用还是禁用按钮，并确定是要附加还是 
解除 PrintTaskRequested 事件。该逻辑是 Mainpage 类的初始化部分的主要内容。 

项目 ： PrintMonthlyPlanner | 文件： MainPage• xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
( 

PrintDocument printDocument; 

IPrintDocumentSource printDocumentSource; 

List<UIElement> calendarPages = new List<UIElement>(); 
bool printingEnabled; 

public MainPage() 



// Create PrintDocument and attach handlers 


printDocument = new PrintDocument(); 
PrintDocumentSource * printDocument.DocumentSource; 
printDocument.Paginate += OnPrintDocumentPaginate; 


printDocument 

printDocument 


GetPreviewPage += OnPrintDocumentGetPreviewPage; 
AddPages +* OnPrintDocumentAddPages; 


OnMonthYearChanged(object sender, EventArgs 


// Calculate number 
int printableMonths 
printButton.Content 


check if it's non-negc 
GetPrintableMonthCount(); 

String.Format("Print {0} Monthfl}" 
printableMonths > 1 ? "s" : ，•••> 


printableMonths, 



(printableMonths 
.Pri 

.PrintTaskRequested 


: intManager.Prir 
rintManager.Prir 


.GetForCurrentViewO ； 


OnPrintManagerPrintTaskRequested; 

OnPrintManagerPrintTaskRequested; 


printingEnabled = printableMonths > 0; 





printurientationuptionuetaiis orientation = 

optionDetails.Options[StandardPrintTaskOptions.Orientation] as 

PrintOrientationOptionDetails; 

orientation.TrySetValue(PrintOrientation.Landscape); 


void OnPrintTaskSourceRequested(PrintTaskSourceRequestedArgs args) 



注, S ， PrintTaskRequested 处理程 序访问 Orientation 选项，并将其初始化为 Landscape 。 
每次用户打开打印机窗格时都会发生。有可能用户实际不希望在横 排模忒 F 打印历。你 
可能想跟踪用户最终采用的设 S , 获取设置，在 Paginate 处理程序中将其保#为字段，并 
在下一次打印机窗格出现时使用该设置。用户偏好甚至吋以保存在用户设貿中，以供 K 
次程序运行时使用。 

创建页面是 Paginate 处理程序的仟务， Paginate 处理程序把页面保#在字段中用 ; T 
GetPreviewPage 和 addPages 处理程序。这些页 rflj 围绕 Grid 建立，该 Grid 有对应一周七天 
的七列、取决 T - 本月周数(范 I 詞可从二月的四个到其他月份的六个)的行数，还有一排在顶 
部 M 示月份和年份标题。 

项目 ： PrintMonthlyPlanner | 文件 ： Main Page • xaml .cs (片段 > 
public sealed partial class MainPage : Page 
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Grid.SetRow(dayBorder, row}; 
Grid.SetColumn(dayBorder f col); 
grid.Children.Add(dayBorder); 



calendarPages.Add(border); 
calendar.AddMonths(1); 
pageNumber +« 1; 

> 

while (calendar.Year < monthYearSelect2.MonthYear.Year |I 
calendar.Month <- monthYearSelect2.MonthYear.Month); 


printDcx^ment.SetPreviewPageCount (calendarPages.Count, PreviewPageCountType.Final); 

} 

void OnPrintDocumentGetPreviewPage(object sender, GetPreviewPageEventArgs args) 

{ 

printDocument.SetPreviewPage(args.PageNumber, calendarPages[args.PageNumber - 1]); 


void OnPrintDocumentAddPages(object sender, AddPagesEventArgs args) 

{ 

foreach (UIElement calendarPage in calendarPages) 
printDocument.AddPage(calendarPage); 

printEJocument. AddPagesComplete (); 


17.9 打印可选范围页 

本章的卜一个程序是试验完全失控的情景。我想演示如何把选项添加到印刷窗格，以 
允许用户可以选择打印页面范闱。同时，我还想展示如何在屏幕与打印机之间共孪 

UIElement 实例。 

对于该演示，我选择更改第4章中比阿特 HN ' 克斯 • 波特 (Beatrix Potter ) 的作品《汤姆小 
猫》。为了方便打印成书页，我决定毎页都 是中独 UseriTomrol 派牛.类。而对丁•在屏幕诚示 
的内容，通过一个可滚动 StackPanel 就可以直接集合这些 UserControl 员。 

该机制没有问题，只不过在末尾我用了 57个 UserControl 派生类，名称从 TomKitten 03 
到 TomKitten 59, 其中的数字表示原 |S 页。但: If 实证明，我真的无法对屏幕和打印机使用相 
同的控件实例，除非我想把中的每一页文字或图片都打印在打印贞的灰 I •.角(这当然是无 
法接受的)。 

M 示在屏辎上的元素随定义其和父级关系的布局过程而变化，而且在一般情况卜•无法 
将这些元素从可视树 I :解除并期望町以在打印机上很好地呈现。你也不能搞乩这些元素。 
也+能仅仅为/打印机就设置新属性， 冈为这 些厲性会影响到屏插 SU ; •结果。也+能把它 
们放入另一个容器，因为会违反一个元素只能有一个父级的规则。 

最后， 我总识 到可以对屏幕和打印机都使用相同的57个 UserControl 派生类，但只有 
在它们是单独实例的情况下，也就是说，每个控件都会实例化 两次： 一次 是用？ 屏幕的 
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Mainpage . xaml , 第二次是用于打印机的 Mainpage . xaml . cs 。 

因此，从某种总义而言，该试验失败了，因为我无法不能直接重复使用实例，但它说 
明 r 包含57个 UserControl 派牛类的 Visual Studio 项 tl 的不足 IVisual Studio 尽力加载和编 
译所有 XAML 文件，而我们程序员也应该很细心。这种方式不可用 r 制作电子书！ 

另一方面，程序的确演示/如何把选杼要打印的页面范围功能添加到打印机选项。 
为了把一组统一风格应用到 MainPage . xaml 的 UserControl 的派生类以及应用到 
Mainpage . xaml . cs 中的 UserControl 派生类实例.我把所有 Style 定义都移到 App . xaml 。 这 
样一来，在整个应用中都 可用。 

项目 ： PrintableTomKitten I 文件： App.xaml 
<Application 

x: Class**" PrintableTomKit ten. App" 

xmlns="http : //schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml'' 
xmlns:local="using:PrintableTomKitten"> 

<Application.Resources> 

<ResourceDictionary> 

<ResourceDictionary.MergedDictionaries> 

<ResourceDictionary Source="Common/StandardStyles.xaml'*/> 
</ResourceDictionary.MergedDictionaries> 

<Style x : Key="conunonTextStyle" TargetType="TextBlock"> 

<Setter Property="FontFamily" Value="Century Schoolbook" /> 

<Setter Property="FontSize •’ Value="36 M /> 

〈Setter Property="Foreground" Value="Black" /> 

<Setter Property-"Margin" Value- w 0 12" /> 

</Style> 

<Style x : Key="paragraphTextStyle" TargetType="TextBlock" 

Based0n= M {StaticResource commonTextStyle}"> 

<Setter Property="TextWrapping" Value="Wrap" /> 

</Style> 

<Style x : Key="frontMatterTextStyle" TargetType="TextBlock" 

Based0n="{StaticResource commonTextStyle}"> 

<Setter Property="TextAlignment" Value="Center" /> 

</Style> 

<Style x: Key=•• imagestyle M TargetType=" Image••> 

<Setter Property=' ， Stretch" Value«"None" /> 

<Setter Property= M HorizontalAlignment" Value="Center" /> 

</Style> 

</ResourceDictionary> 

</Application.Resources 〉 



MainPage . xaml 文件把朽中的所有中-个贞血都列在 StackPanel 上。以下代码省去了中间 
部分。 

: PrintableTomKitten | 义 • 件： MainPage.xaml ( 片 段） 

〈Page 

x:Class="PrintableTomKitten.MainPage" 

xmlns="http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation" 
xmlns:x="http: "schemas.microsoft•com/winfx/2006/xaml" 
xmlns:local="using:PrintableTomKitten"> 

<Grid Background=’ ， White"> 



<StackPanel Name="bookPageStackPane1" 
MaxWidth= M 640" 

HorizontalAlignment="Center"> 
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<local:TomKitten03 /> 
<local:TomKitten04 /> 
<local:TomKitten05 /> 
<local:TomKitten06 /> 
<local:TomKitten07 /> 
<local:TomKitten08 /> 
<local:TomKitten09 /> 

<local:TomKittenlO /> 
• l:TomKittenll /> 
l:TomKittenl3 /> 
<local:TomKittenl2 /> 

<local:TomKitcenl4 /> 
<local:TomKittenl5 /> 
<local:TomKittenl7 /> 
<local:TomKittenl6 /> 

TomKitten50 /> 
TomKitten51 /> 
TomKitten53 /> 
TomKitten52 /> 


<local 
<local 
<local 



<local : TomKitten54 /> 

<local:TomKitten55 /> 

<local:TomKitten56 /> 

<local:TomKitten57 /> 

<local:TomKitten59 /> 

<local:TomKitten58 /> 

</StackPanel> 

</ScrollViewer> 

</Grid> 

</Page> 

其中一些看似 混乱。 像第 4 牮中讨论的，我发现有必要对一些 文字和 图片页进行交换, 
以提供更流畅的阅读体验。 

如下所示，只包含一张图片的页相当小。 

项 R :PrintableTomKitten | 文件： TomKitten20. xaml 
<UserControl 

x:Class-"PrintableTomKitten.TomKitten20 M 

xmlns="http://schemas.raicrosoft.com/winfx/ 2006 /xaml/presentation'' 
xmlns:x= H http://schemas.microsoft.com/winfx/ 2006 /xaml"> 

<Image Source="Images/tom20.jpg" Style="{StaticResource imageStyle)" /> 

</UserControl> 

许多页面都只有一段文字，如下所示。 

项月： PrintableTomKitten I 文件： TomKitten21 .xaml 



x:CXass="PrintableTomKitten.TomKitten21" 

xmlns="http://schemas.microsoft.com/winfx/ 2006 /xaml/presentation" 

xmlns:x»"http://schemas.microsoft.com/winfx/2006/xaml"> 

<Grid VerticalAlignment-"Center'' 

MaxWidth="640"> 

<TextBlock Style="(StaticResource paragraphTextStyle}"> 

S*x2003;&#x2003;Tom Kitten was very fat, and he had grown; 
several buttons burst off. His mother sewed them on again. 
</TextBlock> 

</Grid> 

</UserControl> 


注总 Grid 的 VerticalAlignment 和 max Width 设 W 。 这些设 胃可优 化打印机。如果 
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在屏辂上， VerticalAlignment 设置没有用，因为它是竖排 StackPanel 的子类，而 StackPanel 
本身有640的 max Width 设胃_。 

如下所示，超过一段文字的贞需要 StackPanel 。 

项冃 ： PrintableTomKitten 丨文件： TomKitten2 1 .xaml 



x:Class="PrintableTomKitten.TomKitten22" 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.cofn/winfx/ 2006 /xaml"> 

〈Grid VerticalAlignment="Center" 



<TextBlock Style="{StaticResource paragraphTextStyle}"> 

i#x2003;&#x2003;When the three kittens were ready, Mrs. 
Tabitha unwisely turned them out into the garden, to be 
out of the way while she made hot buttered toast. 



<TextBlock Style="(StaticResource paragraphTextStyle}"> 

&#x2003;i#x2003;"Now keep your frocks clean, children! You 
must walk on your hind legs. Keep away from the dirty 
ash-pit, and from Sally Henny Penny, and from the 
pig-stye and the Puddle-Ducks." 

</TextBlock> 



这就是该项目所有的 XAML 。 

如你所知，现在的程序都提供打印全部或部分文档的选项，这很常见。这些选项通常 
标有类似 All、Selection 和 Custom Range 标签 。 PrintableTomKitten 项 Lj 中没有选择概念， 
因此，我的选项只限 -!"• Print all pages 和 Print custom range 。 

自定义范闱同时包含单独 N 面以及逗号分隔的连续页面的范围，如24, 7, 9-11, 这 
也很常见。以 K CustomPageRange 类的构造函数接受带自定义页面范围的字符串并将信息 
转换成连续页面列表。对于字符串 2-4, 7, 9-11, PageMapping 属性会设置为整数2、3、4、 
7、9、10、丨丨 列表。 如果在某种方式上字符串无效， PageMapping 则为 null , Is Valid 返回 
false 。 

项目 ： PrintableTomKitten I 文件： CustomPrintRange.es 

using System; 

using System.Collections.Generic; 



public class CustomPageRange 

( 

// Structure used internally 
struct PageRange 
( 

public PageRange(int from, int to) : this() 



public int From { private set; get;) 
public int To { private set; get;) 



roreacn (pagenange pageRange m pageRanges) 

for (int page = pageRange.From; page <= pageRange.To; page++) 
this.PageMapping.Add(page); 

I 

// Zero-based in, one-based out 

public IList<int> PageMapping { private set; get;) 
public bool IsValid 

get 1 return this.PageMapping != null; } 


PrintableTomKitlen 程序在两个地方使用 Custom PageRange 炎:：验证用户在打印机选项 
面板进行输入的时候以及稍后在 Paginate 事件处理程序中。第二种情况下， 









CustomPageRange 对象存储为字段，供 GetPreviewPage 和 addPages 处理程序使用。 

MainPage . xaml . cs 文件如下所示。请注意幵头的大数组，包含只用于打印的所有书页的 
额外实例。 


项目 ： PrintableTomKitten 丨文件： 
public sealed partial class Ma 


2 .xaml .cs ( 片 段） 
Page 


PrintDocument printDocument; 
IPrintDocumentSource printDocumentSource; 
CustomPageRange CustomPageRange; 
UIElementl 】 bookPages = 


new TomKitten03(), 
new TomKitten07(), 
new TomKittenll(), 
new TomKittenlS (), 
new TomKittenl9() f 
new TomKitten23(), 
new TomKitten27() # 
new TomKitten31(), 
new TomKitten35(), 
new TomKitten39(), 
new TomKitten43(), 
new TomKitten47(), 
new TomKitten51(), 
new TomKitten55(), 
new TomKitten59() 


new TomKitten04(), 
new TomKitten08(), 
new TomKittenl2() # 
new TomKittenl6(), 
new TomKitten20(), 
new TomKitten24(), 
new TomKitten28(), 
new TomKitten32() / 
new TomKitten36(), 
new TomKitten40(), 
new TomKitten44(), 
new TomKitten48(), 
new TomKitten52(), 
new TomKitten56(), 


new TomKitten05() 
new TomKitten09() 


new TomKittenl7() 
new TomKitten21() 


new TomKitten33() 
new TomKitten37() 
new TomKitten41() 
new TomKitten45 0 
new TomKitten49() 
new TomKitten53() 
new TomKitten57() 


new TomKitten06() 
new TomKittenlO() 
new TomKittenl4() 
new TomKittenl8() 
new TomKitten22() 
new TomKitten26() 
new TomKitten30() 
new TomKitten34() 
new TomKitten38() 
new TomKitten42() 
new TomKitten46() 
new TomKitten50() 
new TomKitten54() 
new TomKitten58() 


public MainPageO 


is.InitializeComponent(); 

Create PrintDocument and 
intDocument - new PrintDoc 


// Create PrintDocument and attach handlers 
PrintDocument - new PrintDocument(); 
printDocumentSource = printDocument.DocumentSource; 
PrintDocument.Paginate +« OnPrintDocumentPaginate; 
printDocument.GetPreviewPage += OnPrintDocumentGetPreviewPage; 
printDocument.AddPages +- OnPrintDocumentAddPages; 


protected override void OnNavigatedTo(NavigationEventArgs args) 

{ 

// Attach PrinCManager handler 

PrintManager.GetForCurrentView().PrintTaskRequested +*= 
OnPrintManagerPrintTaskRequested; 

base.OnNavigatedTo(args); 


protected override void OnNavigatedFrom(NavigationEventArgs e) 


// Detach PrintManager handler 
PrintManager.GetForCurrentView() .F 
base•OnNavigatedFrom(e>; 


OnPrintManagerPrintTaskRequested; 


OnPrintMana- 
PrintTask . 


igerPrintTaskRequested(PrintManager sender, PrintTaskReques 


printTask * args.Request.Create PrintTas k("The Tale of Tom 

OnPrintTaskSourceRequested); 


tedEventArgs c 
Tom Kitten", 


// Get PrintTaskOptionDetails for making changes to options 
PrintTaskOptionDetails optionDetails = 







此前讲过如何使用 PrintTaskOptionDetails 的 CreateTextOption 方法来创建白定义文本 
输入字段。唯一可以替代文木输入字段的方法涉及这甩 M 示的 CreateltemListOption 方法。 
这会产生类似 Orientation 选项的一个互斥选项列表。指定字符串 1 D 和标签。该方法返回 
PrintCustomltemListOptionDetaiis 类型的对象。为此，需要用 1 D 符串和标签添加列表项， 
然后把相同的 ID 添加到 DisplayedOptions 集合。 F 图为初始效果。 



但还要注意， PrintTaskRequested 处理程序还调用 CreateTextOption 为 Q 定义页而范围 
创建文本输入 字段： 


optionDetaiIs.CreateTextOption("idCustomRangeEdit", "Custom Range"); 

创建好字段，但还不会添加到 DisplayedOptions 集合。你想要只有用户选择 Prim custom 
range 才显示该条目。 

该逻辑 发生伤 OptionChanged 处? G 程序中。如果选项 ID 7 •符 串为 idPrintCustom , 则把 
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由字符串 idCustomRangeEdit 标识的文本输入字段添加到 DisplayedOptions 集合，而如果 ID 
字符串为 idPrintAll , 则必须从 DisplayedOptions 中移除。 

项目 ： PrintableTomKitten 丨文件： MainPage.xaml .cs ( 片 段） 
public sealed partial class MainPage : Page 


async void OnOptionDetailsOptionChanged(PrintTaskOptionDetails sender, 

PrintTaskOptionChangedEventArgs args) 

( 

if (args.OptionId — null) 


string optionId = args.Optionld.ToString(); 

string strvalue = sender.Options[optionldj.Value.ToStringO; 

string errorText = String.Empty; 



case "idPrintAll": 

if (sender.DisplayedOptions.Contains("idCustomRangeEdit")) 
sender.DisplayedOptions.Remove("idCustomRangeEdit"); 



sender•DisplayedOptions.Add("idCustomRangeEdit"); 



case "idCustomRangeEdit" : 

// Check to see if CustomPageRange accepts this 

if (!new CustomPageRange(strValue, bookPages.Length).IsValid) 



// If no error, then invalidate the preview 
if (String.IsNullOrEmpty(errorText)) 

( 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> 



如果 idCustomRangeEdit 控件可见，也可以接收来自该控件的通知。为了确定范围是否 
有效， 耑 要调用 CustomPageRange 构造函数并设•能的错误文木。卜图为成功解析的贞 
面范围。 




注意，预览下方的页面数 7 -表示应该打印的页数，但并不表示用户选择的实际页数。 
我不肯定这是否能够真 m 解决该问题，除非把贞 面范 围选择移动到标准选项中，而这一点， 
我们就无法控制了。 

另外请注总， OptionChanged 处观程序并没有将 CustomPageRange 对象保#为字段。 
并小需要将其保存在该处理程序中，而且应该避免这样做。如果用户在来回选择选项，很 
难跟踪哪些是实际选定可见的，哪些不是。 

相反， KT 以在 PrimDocumem 事件的三个处理程序中获取选项的 S 终设置。在本例中， 

Paginate 处理程序获取该设置并将 CustomPageRange 对象存储为 字段， 而其他两种方法町 

以访问 CustomPageRange 。 

: PrintableTomKitten | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 
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printDocument.SetPreviewPageCount(pageCount, PreviewPageCountType.Final); 



void OnPrintDocumentGetPreviewPage(object sender, GetPreviewPageEventArgs args> 
( 

int oneBasedlndex « args.PageNumber; 


if (customPageRange != null && customPageRange.IsValid) 

oneBasedlndex = customPageRange.PageMapping[args.PageNumber - 1 】； 

printDocument.SetPreviewPage(args.PageNumber, bookPages[oneBasedlndex - 1J); 


void OnPrintDocumentAddPages(object sender, AddPagesEventArgs args) 



foreach (int oneBasedlndex in customPageRange.PageMapping) 
printDocument.AddPage(bookPages[oneBasedlndex - 1]); 



foreach (UIE1 
printDoc 


ement bookPage in bookPages) 
ument.AddPage(bookPage); 


我前面提过开始做《汤姆小猫》可打印版木时，是想确定是否可以在屏 幕与打 印机之 
间共享元素。如果想看看打印从 MainPage 显示的 UserControl 派生类实例时会发生什么， 
可以寅接在 OnPrintDocumentGetPreviewPage fU OnPrintDocumentAddPages 方法中用 
bookPageSlackPanel.Children 史换 bookPages « 


17.10 关 键 

吋能打印很多页的程序会遇到分页问题。也许程序需要一些时间来确定到底有多少页 
要 打印。 

在传递给 CreatePrintTask 的回调方法中(即我调用 OnPrintTaskSourceRequested 的方 
法)， " J * 以先调用事件参数中的 SetSource ， 再使用事件参数来延迟执行异步 任务： 

PrintTaskSourceRequestedDeferral deferral = args.GetDeferral<); 

await BigJoblnvolvingPrintingAsync(); 

deferral.Complete(); 

在这种情况 F ， 显示带有所选打印机名称的打印窗格，但在打印机名称下方有一个配 
有文字 “App preparing to print ” 的旋转进度环。用户叫能无法享受该体验，但这是应用无 
须挂在用户界面线程 k 就可以获取一点点时间的有效途径。 

也请记住， PrintDocument 的 SetPreviewPageCount 方法的第二个参数是 
PreviewPageCountType 枚平项， wj •以为 Intermediate . 也 wj ■以为 Final 。 +需要限制对 Paginate 
处理程序 调用该 方法。一幵始可以用初步页数进行调用，然后用分贞继续后台任务。针对 
用户界曲线程的 Dispatcher , Kf 以额外调用 SetPreviewPageCount 来更新 i | •数。 
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为了帮助应用告知用户长打印任务的进度， PrintTask 定义了三个事件，分别名为 
Previewing 、 Submitting、Progressing 和 Completed 。 

17.11 打印 FingerPaint 艺术画 


从你第一次开始使用这本书中的各种 FingerPaint 程序，我相信你就渴望打印自己的作 
品，并将它贴在冰箱门上。当然，总是可以对 nngerPaint 屏幕进行截屏并打印出来，但我 
们把打印支持集成到 FingerPaint 内部。 

为了尽最小影响现有 FingerPaint 代码，我决定从 PrintDocument 中产生派生类，称为 
BitmapPrintDocument 。 我提到过可以这么做，虽然所得类没有覆写方法，但确实使引用某 
些对象更容易了。 

BitmapPrintDocument 类在 Main Page 构造函数中进行实例化。 

项目： FingerPaint 丨文件： MainPage.xaml.es ( 片段 > 

public MainPage() 

// Create a PrintDocument derivative for handling printing 

new BitmapPrintDocument(() => { return bitmap;)); 

) 

注意构造函数 BitmapPrintDocument 的参数，它太怪了！问题在 T •如果打印该位图， 
BitmapPrintDocument 类肯定需要引用名为 bitmap 的 WriteableBitmap 字段，但不能直接传 
递到 BitmapPrintDocument 构造函数。无论什么时候程序从文件或剪贴板加栽图片或者创建 
新_布的时候 ， bitmap 7段都会发生变化。因此，我用 FimcKBitmapSoiirce 〉 类喂的参数定 
义了 BitmapPrintDocument 构造函数，这样一来，只要 BitmapPrintDocument 需要当前位图， 
就可以直接回调 MainPage 。 

BitmapPrintDocument 将该参数保存为字段并执行标准初始化。 

项 R : FingerPaint | 文件： BitmapPrintDocument .cs < 片段） 

public class BitmapPrintDocument : PrintDocument 

{ 

Func<BitmapSource> getBitmap; 

IPrintDocumentSource printDocumentSource; 



public BitmapPrintDocument(Func<BitmapSource> getBitmap) 

{ 

this.getBitmap = getBitmap; 


// Get IPrintDocumentSource and attach event handlers 
printDocumentSource = this.DocumentSource; 



this.GetPreviewPage += OnGet PreviewPage; 
this.AddPages +- OnAddPages; 

// Attach PrintManager handler 

PrintManager.GetForCurrentView().PrintTaskRequested += 

OnPrintDocumentPrintTaskRequested; 
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PrintTaskRequested 处理程序是第一个耑要位图的，因为它设置的是打印贞面的初始方 
向与位图方向相一致。 

项目 ： FingerPaint 丨文件： BitmapPrintDocument.cs ( 片段 > 

async void OnPrintDocumentPrintTaskRequested(PrintManager sender, 

PrintTaskRequestedEventArgs args) 


deferral 


i.GetDeferral(); 


// Obtain PrintTask 
PrintTask printTask 


args.Request.CreatePrintTask("Finger Paint", 

OnPrintTaskSourceRequested); 


// Probably set orientation to landscape 
PrintTaskOptionI>etails optionDetails = 

PrintTaskOptionDetails.GetFromPrintTaskOptions(printTask. 

PrintOrientationOptionDetails orientation = 

optionDetails.Options[StandardPrintTaskOptions.C 

PrintOrientationOptionDetails; 

bool bitmapIsLandscape = false; 

await border.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () *> 


BitmapSource bitmapSource = getBitmapO; 

bitmaplsLandscape = bitmapSource.PixelWidth > bitmapSource.PixelHeight; 


))： 


orientation.TrySetValue(bitmapIsLandscape ? PrintOrientation.Landscape : 

PrintOrientation.Portrait); 

deferral.Complete(); 

I 

i # 注意， CoreDispatcher 对象必须用来访问用户界面线程中的位图。此时，另一些車件 
处理程序应该会很熟悉，+同之处在 丁引用 PrintDocument 方法是直接引用 this 方法。 

项 H:FingerPaint | 文件： BitmapPrintDocument.cs ( 片段 > 

void OnPrintTaskSourceRequested(PrintTaskSourceRequestedArgs args) 

args.SetSource(printDocumentSource); 


void OnPaginate(object sender, PaginateEvencArgs args) 

{ 

PrintPageDescription pageDesc = args.PrintTaskOptions.GetPageDescription(0); 
// Get the Bitmap 

(border.ChiId as Image).Source * getBitmapO; 


// Set Padding on the Border 

double left = pageDesc.ImageableRect.Left; 

double top = pageDesc.ImageableRect.Top; 

double right - pageDesc.Pagesize.Width - left - pageDesc.ImageableRect.Width; 
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this.SetPreviewPage(args.PageNumber, border); 

) 

void OnAddPages(object sender. AddPagesEventArgs args) 


this.AddPage(border); 



Image 元素有 Uniform 的默认 Stretch 模式，会使位图显示最大化，同时保持满屏长宽 
比。此外， OnPaginate 方法设贾 Border 的 Padding 属性，以免页面中不可打印区域，因为 
你当然想把手绘画打印到打印机允许的区域。 






第 18 章传感器与 GPS 

近些年来， u •算机匕经演化为开发新的传感器功能。 这叮 不是新片中的情节！许多电 
脑(尤其是平板电脑和其他移动设备)都包括一些硬件能让机器知道它在二维空间的方位、 
在地球表面的位背、附近光的焭度甚至计算机在用户手中旋转的速度。 

这些硬件统称为“传感器”，其软件接口能在 Wi n do WS . D e vi CeS . Sen S or S 命名空间中找 
到，帮助程序确定其地理位 K 的类则在 Windows . Devices . Geolocation 命名空间中。 承担后 
—项工作的硬件经常称为 GPS ( Tl 星全球定位系 统)， 但计算机也常常通过 M 络连接来确定 
其地理位 

本章着重讲 SimpleOrientationSensor 、 Accelerometer 、 Compass 、 Inclinometer 、 
OrientationSensor 和 Geolocator 类所提供的信息，似恐怕我会 跳过+ 常用的 LightSensor 和 
Gyrometer 类，后者测贵计算机的角速度。 

为了完全利用本章的内容，你需要让电脑运行示例程序并在空中移动电脑，甚辛:把电 
脑举过头顶。如果你的 Windows 8开发机器像我的一样是固定在桌子上的，则需要一台平 
板电脑(比如微软 Surface ), 并远程部署程序，就像 Tim Heuer 在其博客文章中 W 论的一样， 
其 M 址为 http :// timheuer . com / blog / archive /20 12/1 0/26/ remote - debugging - windows - store - apps - 
on - surface - arm - devices . aspx 。 

木章的一些尔例程序均改编自我2012年6 )】到12 打 '& 表于 MSDN Magazine h 的有关 
Windows Phone 7.5 传感器的文章。 

18.1 方位和定位 

正如其名7所表示的，我讨论的最简单传感器就是 SimpleOrientationSensor , 让程序大 
致了解 II •算机如何在卩维空间中定位，但没冇细节。如果要实例化 SimpleOrientationSensor 
类，吋以调用一个静态 方法： 


SimpleOrientationSensor SimpleOrientationSensor = SimpleOrientationSensor.GetDefault(); 

在应用中只需要调用一次，因此，这段代码 WJ •以显示为一个字段定义，允许在整个类 
的范围内访 H 该对象。如果 SimpleOrientationSensor . GetDefault 方法返回 null ， 则说明电脑 
没有定位功能。 

任何时候都吋以从 SimpleOrientationSensor 对象获取表明当前方位 的值： 

SimpleOrientation simpleOrientation « simpleOrientationSensor.GetCurrentOrientation(); 

SimpleOrientation 枚平类型包含以卜 ' 6项： 

• Not Rotated 

• Rotated 90 DegreesCounterclockwise 

• Rotated 1 SODegreesCounterclockwise 

• Rotated 270 DegreesCounterclockwise 
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• Faceup 

• Facedown 

对这6项的信息限制是 SimpleOrientationSensor 中的 Simple 那部分。 

如果方位发生改变， 也吋以 通过事件获得通知。吋以对 OriemationChanged 事件 设置处 
理程序，如 F 所示： 

SimpleOrientationSensor.OrientationChanged+= OnSimpleOrientationChanged; 


该事件只有在方向发生变化时才会触发，如果电脑保持相对静止，该事件不会发 生。 
如果需要初始值，可以额外调用 GetCurrentOrientation 方法来设置車件处理程序。 

该事件处理程序在其自身线程中运行，这样 nj •以和用户界面线程进行交互，而你需要 
通过户界面线程来使用 CoreDispatcher 对象： 



await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> 




名字超长的事件参数有 SimpleOrienlation 枚 举类型 的 Orientation 属性以及 
DateTimeOfFset 类印的 TimeStamp 属性。 

你町能 会问：我+是己经有了定位信息吗？ Windows . Graphics.Display 命名空间+是己 
经提供了吗？我不是用了 DisplayProperlies 类及其 NativeOrientation 和 CurrentOrientation fit 
态属性,还有用 P 定位信息的 OriemationChanged 事件吗？你应该记得这两个静态属性会返 
回 DisplayOrienlations 枚平类型项： 

• Landscape 

• Portrait 

• LandscapeFlipped 

• PortraitFlippe 

SimpleOrientationSensor 和 DisplayProperties 类当然相关，但重点是要知道如何 相关： 
SimpleOrientationSensor 类表明 i | 算机在•:维空间如何定位。 DisplayProperties.CurrenlOrienlation 
属性则表明 Windows 如何自动重新定位程序窗口来补偿计算机。换句话说， 
SimpleOrientationSensor 报告硬件定位， DisplayProperlies.CurrentOrienlation 则报 A 能响应硬 
件定位的软件定位。 

Orientation AndOrienlation 项 II 试图区分这两种定位。 XAML 文件只定义了几个 TextBlock 

元素标签并显水一些信息。 


项 R: OrientationAndOrientation | 项 MainPage.xaml ( 片段） 

<Page … FontSize="24"> 

<Grid Background:"{StaticResource ApplicationPageBackgroundThemeBrush} w > 
<Grid HorizontalAlignment="Center" 



<RowDefinition Height="Auto" /> 
<RowDefinition Height*"Auto" /> 
</Grid.RowDefinitions> 
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<Grid.ColumnDefinitions 〉 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width=”Auto" /> 
</Grid•ColumnDefinitions 〉 


<TextBlock Text= M SimpleOrientationSensor:&#x00A0; n 
Grid.Row="0 M 
Grid•Column:"0" /> 

〈TextBlock Name="orientationSensorTextBlock" 

Grid.Row-"0" 

9 Grid.Column:"1" 

TextAlignment= M Right" /> 

<TextBlock Text="DisplayProperties.CurrentOrientation : &#x00A0; 
Grid.RowW 
Grid.Column= M 0 M /> 


<TextBlock Name="displayOrientationTextBlock" 

Grid.Row="l w 

Grid.Colunui="l" 

TextAlignment*"Right n /> 

</Grid> 

</Grid> 

</Page> 

代码隐藏文件定义两个方法，只用丁•设置 Grid 第：列的两个 TextBlock 元索。既从构 
造函数中调用两种方法设背初始值，同时也从两个事件的处理程序 调用。 

项目： OrientationAndOrientation | 义件： MainPage.xaml.es ()V©) 
public sealed partial class MainPage : Page 



public MainPage() 

( 

vthis.InitializeComponent(); 


// SimpleOrientationSensor initialization 
if (SimpleOrientationSensor != null) 

[ 

SetOrientationSensorText(SimpleOrientationSensor.GetCurrentOrientation()); 
SimpleOrientationSensor.OrientationChanged +■= OnSimpleOrientationChanged; 

) 

// DisplayProperties initialization 

SetDisplayOrientationText(DisplayProperties.CurrentOrientation); 
DisplayProperties.OrientationChanged += OnDisplayPropertiesOrientationChanged; 


// SimpleOrientationSensor handler 

async void OnSimpleOrientationChanged(SimpleOrientationSensor sender, 

SimpleOrientationSensorOrientationChangedEventArgs args) 
i 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()-> 

( 

SetOrientationSensorText(args.Orientation); 

))； 


void SetOrientationSensorText(SimpleOrientation simpleOrientation) 



// DisplayProperties handler 

void OnDisplayPropertiesOrientationChanged(object sender) 
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void SetDisplayOrientationText(DisplayOrientations displayOrientation) 

i 

displayOrientationTextBlock.Text - displayOrientation.ToString (); 


注意， SimpleOrientationSensoi •是作为字段进行实例化的，但构造函数在访问对象之前 
会检沓非 null 值。 

在--台有原生横向定位的平板电脑上运行该程序 ( DisplayProperties . NativeOrientation 属 
性会返回 DisplayOrientations . Landscape )， 如! ft 没有采取措施來阻 lh Windows 8变化方位(比 
如将平板放在扩展坞 h >， 那么随荇顺时针方向逐渐旋转平板电脑.你一般会发现两个方位 


指示器有卜 表所示 的对应关系。 

SimpleOrientationSensor 

DisplayProperties.CurrentOrientation 

NotRotated 

Landscape 

Rotated270DegreesCounterCIockwise 

Portrait 

Rotated 180DegreesCounterClockwise 

LandscapeF lipped 

Rotated90DegreesC'ounterClockwise 

PortraitFlipped 


SimpleOrientationSensor 还报告 Faceup 和 Facedown 值，两#和 DisplayOrientations 枚 

举没有对应关系。 

I •.表大致适用 T 能原生横向定位的平板，而具有原生纵向定位的移动设备则有卜表所 
示的对应关系。 


SimpleOrientationSensor 

DisplayProperties.CurrentOrientation 

NotRotated 

Portrait 

Rotated270DeKreesCounterClockwise 

LandscapeF lipped 

Rotated 180DesreesCounterClockwise 

PortraitFlipped 

Rolated90Dej»reesCounterClockwise 

Landscape 


此外，应用可以要求 Windows 补偿计算机定位， 耍 么通过 Package . appxmanifest 文件， 
要么在软件中设 S DisplayProperties . AutoRotationPreferences 厲性。而在这种情况 K ， 应用 
运行时， DisplayProperties . CurrentOrientation 小会改变。有些平板也有一个硬件开关， H ] 户 
可以切换以停 lh Windows 自动旋转屏辂。而此时，你会看到下表所氺的对应关系。 


SimpleOrientationSensor 

DisplayProperties.CurrentOrientation 

NotRotated 

PortraitFlipped 

Rotated270DegreesCounterClockwise 

PortraitFlipped 

Rotated 180Dej»reesCounterClockwise 

PortraitFlipped 

Rotaled90DegreesCounterCIockwise 

PortraitFlipped 


如果想自己补偿方位，也是可以的。吋以指令 Windows 不执行任何方位变化，然后用 
SimpleOrientationSensor 来决定电腕如何舆 il : 定位。然而， it's id ft Package.appxmanifest 文 
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件和 DisplayProperties.AutoRotationPreferences 所做的只是你偏好的，并 + 足 Windows 实际 
会做的車情，因此，如果 Windows 调整显>〗;•器的方位句偏好相反，"〖能潘要做进一步调整。 

防 lh 自动旋转最安全的方法是把 Display Properties . AutoRotationPreferences 设定为 
DisplayProperties . NativeOrientation , 木章稍 Fi •将进行 i 寸论。 


18.2 加速度、力、重力和矢量 

毫无疑问， SimpleOrientationSensor 在内部吋以 i 方 W 称为“加速 il •”的硬件。加速 I 卜是 
测歐加速度的装胥，知道电脑的加速度初符好像没有什么用。然而，根据踢本物玴知识吋 
以知道，特别是牛顿第-运动定 伴： 

F=ma 

力等于质量乘以加速度，而有一种力儿 乎无法 摆脱，即 ® 力。汁算机的加速计通常用来测 
最重力，并回答基本问题“哪条路向卜？ ” 

"J •以通过 Accelerometer 类更寅接地 i 方问加速硬件。要实例化 Accelerometer 类， uf 以 
使用和 SimpleOrientationSensor 方法名的静态方法： 

Accelerometer accelerometer = Accelerometer.GetDefault(); 

如果 Accelerometer.GetDefault 方法返回 null, 则表#电脑没有加速 II •或 Windows 8 没 
有识别出来。如果没有加速计，应用就+能运行，耑耍 M 知用户缺少加 速汁。 

仟何时候都吋以获得加速度的当 前值： 


AccelerometerReading accelerometerReading = accelerometer.GetCurrentReading(); 

SimpleOrientationSensor 中的类似方法称为 GetCurrentOrientation 。 

最好检作 GetCurrentReading 返回的值是否力 nullo AccelerometerReading 定义以卜'四个 

属性: 

• double 类把的 AccelerationX 

• double 类型的 AccelerationY 

• double 类型的 AccelerationZ 

• DateTimeOffset 类型的 Timestamp 

三个 double 值共同构成二维矢量，指向相对7•设备的地球。 

还 wj •以为 Accelerometer 对象附加車件处现 程序： 

accelerometer.ReadingChanged + = OnAccelerometerReadingChanged; 

SimpleOrientationSensor 中类似的办件称为 OrientationChanged 。 和 OrientationChanged 
一样， ReadingChanged 处理程序在中.独线程中运行， 冈此 " J * 以进行如卜 处理： 

async void OnAccelerometerReadingChanged(Accelerometer sender, 

AccelerometerReadingChangedEventArgs args) 

( 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> 
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AccelerometerReadingChangedEventArgs 定义了 AccelerometerReading 类型的属性，名 
为 Reading , 与从 GetCurrentReading 返回的对象相同。 

你预计 ReadingChanged 处理程序多久调用一次？如果电脑静止，则町能根木+调用！ 
因此，如果需要初始 Accelerometer 读数，则应该在一开始就调用 GetCurrentReading 。 

如果计算机正在移动并在空间中改变方位，参数变化(在一定标准范围内)但不超过从 
Accelerometer 的 Reporllnterval 属性获得的以毫秒为单位的时间间隔时，则调用 
ReadingChanged 处理程序。我看到默认值为112,也就是说，以不快于于每秒9次的频率 
调用 ReadingChanged 方法。 

Kf 以把 Reportlnterval 设置为其他值，但不能低 p MinimumReportlnterval 属性的返回 
值，我发现返回值为16毫秒，即每秒约60次。把 Reportlnterval 设置为 MinimumReportlnterval 
获取数据最大把 Reporthiterval 设置为零，返回默认设置。 

Windows . Devices . Sensors 中的所有其他传感器类都和 Accelerometer 的软件界面相同。 
这些类都有以 K 几项： 

• 静态 GetDefault 方法 

• GetCurrentReading 实例方法 

• Reportlnterval 属性 

• MinimumReportlnterval 属性 

• ReadingChanged 事件 

只有 SimpIeOrientationSensor 与其他的+ 同。 

如果电脑为静止 ， AccelerometerReading 类的 AccelerationX > AccelerationY 和 
AccelerationZ 属性会定义一个指向地球中心的矢量。矢量通常用黑体字坐标标记，例如 ( x , 
y» Z), 以区别于三维空间中的点 ( x ， y , z )。 点是在空间中的 位置； 而矢量是方向和最值。 
矢景和点当然相关：矢最( X , Y , Z ) 的方向是从点(0, 0, 0) 到点 ( x , y ， z ), 矢暈的景值是 
该线的长度。但矢 ® 并不是线木身，也没有位置。 

. 矢量量值，可以用勾股定理的三维形式进 行 计算： 

Magnitude = yjx 2 +y 2 +z 2 

任何 （维矢 都必须相对丁•一个特定三维坐标系统，从 AccelerometerReading 对象获 
得的矢量也不例外。对于原生横向定位的平板，加在设备硬件上的來标系统如下图所示。 
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注意， Y 增加方向为向上，这和常规二维图形相反。正 Z 轴指向屏幕外。这一惯例通 
常称为“右手”坐标系统。如果右手食指在正X轴方向，并且中指在正 Y 轴方向，则拇指 
指向正 Z 轴。 

或者，如果把右手手指蜷缩起来，把正X轴旋转到正 Y 轴，则拇指指向正 Z 轴。这种 
方法适用了•顺序X、 Y、Z 轴的任何两 个轴： 蜷缩右手手指把正 Y 轴旋转正 Z 轴，则拇指 
指向正X方向。或蜷缩右手手指把正 Z 轴旋转为正X轴，则拇指指向正 Y 轴。 

右手规则也可以用丁•确定绕轴旋转的方向。对于绕X轴旋转(例如)，让右手拇指指向 
正X,而手指蜷缩在围绕该轴正向旋转角度的方向。 

对丁-原生纵向定位的设备，坐标系统与用户角度相同(见下 图)。 



M 然我一直没能证实这一点，但传统笔记本电脑的來标系统是基于键盘进行记录，而 
不是基于屏辂。X轴沿键盘宽度， Y 轴沿键盘卨度，而 Z 轴位于键盘之外。 

平标系统固化在设备硬件上, Accelerometer 矢最点指向相对于该坐标系统的地球中心。 
例如，平板电脑在原生方向上保持竖直，加速度矢量点在 -Y 方向。该矢量大小约为丨，因 
此，该矢最位于区域(0, -1,0) 的某处。设备放在平整表血'民屏幕朝上，则矢最位于区域 (0,0, 
-1) 的某处。 

量值1表示矢量以 g 为单位，即 Itl 地球表面軍力作用所造成的的加速度或约32英尺每 
平方秒。如果带平板去月球，最值就约为0.17。如果让平板 G 由落体(如果你敢 的话) ，加 
速度矢 S： 的最值将下降到岑，直到击中地面。 

以下是 AccelerometerAndSimpleOrientation 程序，用来 @ 示來自 Accelerometer 和 
SimpleOrientationSensor 的值。 XAML 文件包含些 TextBlock 元素标签以及来白代码隐藏 
文件的等待值^ 

项月 ： AccelerometerAndSimpleOrientation I 义件： MainPage.xamI 《片 段） 

<Page ... > 

<Page.Resources 〉 

<Style TargetType="TextBlock"> 




762 Windows 租序设计(第 6 版） 

< Setter Propertya H FontSize" Value="24 M /> 

<Setter Property="Margin M Value="24 12 24 12" /> 
</Style> 

</Page.Resources 〉 


<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush)"> 


<Grid HorizontalAlignment="Center" 
VerticalAlignment="Center ,, > 

<Grid•RowDefinitions> 

<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height= M Auto" /> 
<RowDefinition Height="Auto" /> 



lumnDef 

lumnDef 


<Grid.Coli 

efinition Width="Auto" /> 
<ColumnDefinition Width*"Auto M /> 


</Grid.ColumnDefinitions 〉 

<TextBlock Grid.Row:"0" Grid.Column="0 M Text="Accelerometer X:" /> 
<TextBlock Grid.Row="l" Grid.Column="0" Text= ,, Accelerometer Y:" /> 
<TextBlock Grid.Row- H 2" Grid.Column-^O" Text="Accelerometer Z:" /> 
<TextBlock Grid.Row= M 3" Grid.Colunm="0 M Text="Magnitude:" 
Margin="24 24" /> 

<TextBlock Grid.Row="4" Grid.Column= M 0" TexC="Simple Orientation:" 


/> 


<TextBlock Grid.F 

TextAlignment="Right" /> 
<TextBlock Grid.Row="l" Grid.Column= M 
TextAl ignment=' , Right" /> 
<TextBlock Grid.Row="2" Grid.Column= 
TextAlignment="Right"/> 

<TextBlock Grid.Row="3" Grid.Column= 
TextAlignment-"Right" 
VerticalAlignment= 
<TextBlock Grid.Row= , M , ' Grid.C 

TextAlignment="Right" /> 

</Grid> 

</Grid> 

</Page> 


"magnitude" 


"simpleOrientation" 


代码隐藏文件比之前的程序有史多功能。如果 Accelerometer 或 SimpleOrientationSensor 
不能实例化，程序会报告给用户。此外，还有一件好事情，如果程序不使用就小运行 
Accelerometer , 因为会消耗电敏。为了表示程序规范，程序在 OnNavigatedTo 覆写中附加 
了处理程序并在 OnNavigatedFrom 中分离处理程序。除此之外，程序结构和之前的程序非 
常类似。 


项 H: AccelerometerAndSimpleOrientation I 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


Accelerometer accelerometer = Accelerometer.GetDefault(); 

SimpleOrientationSensor siirpleOrientationSensor - SimpleOrientationSensor.GetDefault(); 


public MainPage() 

{ 

this.InitializeComponent(); 
this.Loaded += OnMainPageLoaded; 


async void OnMainPageLoaded(object sender. 


RoutedEventArgs args) 


if (accelerometer *= null) 
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if 


await new MessageDialog("Cannot start 

jimpleOrientationSensor == null) 
await new MessageDialog("Cannot start 


.ShowAsync{); 


I •ShowAsync(); 


// Attach event handlers 

protected override void OnNavigatedTo(NavigationEventArgs args} 

{ 

if (accelerometer != null) 

{ 

SetAccelerometerText(accelerometer.GetCurrentReading()); 
accelerometer.ReadingChanged += OnAccelerometerReadingChanged; 


null) 

SetSirapleOrientationText(simpleOrientationSensor.GetCurrentOrientation()); 
simpleOrientationSensor.OrientationChanged += OnSimpleOrientationChanged; 

) 

base.OnNavigatedTo(args); 


// Detach event handlers 

protected override void OnNavigatedFrom(NavigationEventArgs args) 

{ 

if (accelerometer !=» - null) 

accelerometer.ReadingChanged — OnAccelerometerReadingChanged; 

if (simpleOrientationSensor != null) 

simpleOrientationSensor.OrientationChanged -= OnSimpleOrientationChanged; 

base.OnNavigatedFrom(args); 


// Accelerometer handler 
async void OnAccelerometerReadi 


ngChanged(Acceleromete 
: celerometerReadingChan 


sender. 


args) 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,(> => 

i 

SetAccelerometerText(args.Reading); 

De¬ 


void SetAccelerometerText(AccelerometerReading accelerometerReading) 
I 

if (accelerometerReading — null) 
return; 


accelerometerX.Text = accelerometerReading.AccelerationX.ToString( "F2"); 
accelerometerY.Text = acceleromeCerReading.AccelerationY.ToString( "F2" ) ; 
accelerometerZ.Text = accelerometerReading.AccelerationZ.ToString( "F2 "); 
magnitude.Text - 

Math.Sqrt(Math.Pow(accelerometerReading.AccelerationX, 2) + 

Math.Pow(accelerometerReading.AccelerationY, 2) + 

Math.Pow(accelerometerReading.AccelerationZ, 2)).ToString("F2 "); 


// SimpleOrientationSensor handler 

async void OnSimpleOrientationChanged(SimpleOrientationSensor sender. 
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void SetSimpleOrientationText(SimpleOrientation simpleOrientation) 
( 

this.simpleOrientation.Text = simpleOrientation•ToString(); 


K 图所示为是这个程序在我木书所用平板电脑 L 运行后所得到的效果，平板电脑放在 
扩展坞上。 



+ 要看到鼠值+褚确等 r 1就感到心慌。这并+总味着你己经不知+觉离开地球表而. 
只是加速硬件并小总是如我们想得那么精确罢了。 

Y 和 Z 分帚均 为负，表明平板向 G 倾斜。前面已经提到过，如果平板良线 h 升，矢 t 
理论上为(0, -1, 0>,如果放在桌子上并且屏幕®直向上,则矢量理论上为<0, 0,-1>。而在 
两个位胥之间， 乎 板绕着 X 轴旋转。将 Y 和 Z 值传递给 Math . At a n 2 方法，则町以得到旋 
转角度。 

如果在手持设备 L 运行该程序，吋以在小同方向 h 转动设备来肴效果。-•般会看出 
SimpleOrientationSensor 和 Accelerometer 的如 F 对应关系。 



约等]•符号(一） 吋以 随便 解释。 Accelerometer 矢 ®: M 然表明在达到某个值之前有很多 
变化，而该倌会促使改变 SimpleOrientationSensor . 
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AccelerometerAndSimpleOrientation 程序没有表明任何偏好方向，因此，在空中四处移 
动平板电脑时， Windows 会假设你不想看到数据倒过来，因此会自动改变显示方向。应该 
看到 SimpleOrientationSensor 值和屏幕方向之间的对应关系，但这只是因为 Windows 会基 
于这些值改变 M 示方向！如果禁止 Windows (以任何 方式) 更改屏幕方向，并不影响通过该 
程序显示的信息。 

事实上，显示方向不断发生变化是非常恼人的。每一次 M 示方向变化时，屏幕更新都 
会暂停一会儿，内容也会伸缩以响应这种变化。你川'能认为通过 Accelerometer 改变屏幕内 
容的程序应该也•以禁止自动显示方向改变。 

出于该原因，本章剩余所有程序都在程序构造函数中包含一个简单语句，把偏好定位 
设置为原生 定位： 

DisplayProperties.AutoRotationPreferences = DisplayProperties.NativeOrientation; 

你会发现，如果在手持设备上运行 AccelerometerAndSimpleOrientation 程序并快速移 
动，加速度矢最的方向和最值也会随之变化，不再显示来自地球中心的重力。例如，如果 
向左猛移设备，加速度矢最会指向右边(但只有当装置正在加速时)。如果以稳定速度移动， 
加速度矢量会停下来并軍新指向地球。如果在移动时突然停止设备，加速度矢量也会显示 
速度变化。 

Accelerometer 类还定义了一个名为 Shaken 的事件，没有其他信息。 Shaken 事件对需 
要扔一对骰子、推荐另一家餐厅、擦除绘图或撤消意外擦除等操作的程序非常有用。 

Accelerometer 的一个常见应用是气泡水平仪。 XAML 文件实例化4个 Ellipse 元素。其 
中3个为同心轮廓，而第4个是气泡本身。 

项 R: BubbleLevel I 文件： MainPage.xaml 《片段 } 

<Grid Background^' (StaticResource ApplicationPageBackgroundThemeBrush) **> 

<Grid Name="centeredGrid" 


Hori2ontalAlignment="Center" 



Stroke="(StaticResource ApplicationForegroundThemeBrush} H /> 


<Ellipse Width="24 



Stroke="(StaticResource ApplicationForegroundThemeBrush}" /> 
〈Ellipse Fill= N Red n 



HorizontalAlignment="Center , ' 
Vertica 1A1 ignment=" Cente r •• > 
<Ellipse.RenderTransform> 



</Ellipse.RenderTransform> 

〈 /Ellipse 〉 



代码隐藏文件把 DisplayProperties . AutoRotationPreferences 设置为 
DisplayProperlies.NativeOrientationo Windows 不会自动改变程序的显示方向。程序还使用 
SizeChanged 处理程序来设置 outerCircle 和 halfCircle 的尺、 j 。 
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项 H: BubbleLevel I 文件： MainPage.xaml.cs (厂 i • 段 ) 
public sealed partial class MainPage : Page 



public MainPage() 

( 

this.InitializeComponent(); 

DisplayProperties.AutoRotationPreferences = DisplayProperties.NativeOrientation; 
Loaded += OnMainPageLoaded; 

SizeChanged += OnMain PageSizeChanged; 


async void OnMainPageLoaded(object sender, RoutedEventArgs args) 

{ 

if (accelerometer !* null) 

( 

accelerometer.ReportInterval = accelerometer.MinimumReportlnterval; 
SetBubble(accelerometer.GetCurrentReading()); 

Accelerometer .ReadingChanged += OnAccelerometerReadingChanged; 

) 

else 

( 

await new MessageDialog("Accelerometer is not available").ShowAsyncO; 


void OnMainPageSizeChanged(object sender. SizeChangedEventArgs args) 

double size = Math.Min(args.NewSize.Width, args.Newsize.Height); 

outerCircle.Width * size; 

outerCircle.Height = size; 

halfCircle.Width = size / 2; 

halfCircle.Height = size / 2; 


async void OnAccelerometerReadingChanged(Accelerometer sender, 

Acce1erometerReadingChangedEventArgs args) 

( 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> 

( 

SetBubble(args.Reading); 

»)； 


void SetBubble(AccelerometerReading a ccele rome te rReading) 
{ 

if (acceleromecerReading = null) 


double x = accelerometerReading.AccelerationX; 
double y = accelerometerReading.AccelerationY; 

bubbleTranslate.X = -x * centeredGrid.ActualWidth / 2; 
bubbleTranslate.Y = y * centeredGrid.ActualHeight / 2; 


SetBubble 方法看起來很简中 .： 只需要加速度 矢墩的 X和 Y 分帒，并使用两者 来设背 
中心气泡的X和 Y 來标，缩放到外圆周的半径。但考虑一下平板电脑 Ifij 朝上或朝 F 放在 
桌 P 上的情况。加速度矢讀的 Z 分为I或 -1 ,而X和 Y 分量均为0,也就是说气泡位 r 
屏锫中心。这是 IB 角的。 

现在拿好 f 板电脑，屏嵇萌直 r 地球。 Z 分 R 变为0。也就是说加速度矢位的 W: 值完全 



来源丁 - X 和 Y 分说。换而 言之: 
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这就是在两个维度上圆方程， W 此，气泡 位亍外 I损圆的某个地方。气泡的确切 位背基 
于平板电脑绕着 Z 轴的当前旋转。 

加速度矢铀向下指向地球中心，气泡会动起来，也就是说需耍将加速度矢最的X和 Y 
分墩的符号转换为二维屏辂坐标。但记住，加速度矢 S 的 Y 轴是从屏幕肀标反转， W 此只 
有X分慑需要符3交换，柷序的 JS/fi 两行代码显示了这种怙况。 

F 图所示为是程序住 Microsoft Surface 平板电脑I•.运行的效果。 



当然，屏沿截图并没有完全捕捉气泡在现实生活中如何抖动。 Accelerometer 伉还相当 
原始，不过在现实应用中，你会想让气泡顺泔•点，这是接 F 来两个程序要完成的。 


18.3 跟随滚球 


加速计常见于手持设备游戏中。例如，如采有一个模拟1 驶汽车 的游戏，用户吋以通 
过向左或向心倾斜电脑来实现汽乍转向。 

以 卜两 个程序模拟球作屏籍 I •.的滚动。如果平板电脑^地彳/-行并在电 脑上平衡放抨 
个真实的球， a 以通过倾斜屏幕使球 灰 右滚动。越倾斜，球的加速度越大 。接 卜来的两个 
程序以类似方式移动虚拟球。 和气 泡水平仪程序一样，两个程序忽略 Accelerometer 矢 ft 的 
Z 分墩，只用 X 和 Y 分 M 来管理屏幕二维表酣的加速度。 

(tTiltAndRoll 程序中，如果球撞击到边缘.其飛 ST- 边上的速度将令部£失，如果在 
该方向仍有速度.则继续沿着边缘滚动。 XAML 文件定义该球。讪过设 K Center 属性， 
EllipseGeometry 允许球定位在 特定平.标。 


项 H: TiltAndRoll I 义件： Main Page, xaml (片段 > 

<Grid Background:"(StaticResource ApplicationPageBackgroundThemeBrush)"> 
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<EllipseGeometry x:Name="ball M /> 

</Path.Data> 

</Path> 

</Grid> 

代码隐藏文件开始为 GRAVITY 定义常最，以像蒺/平方秒为中.位。理论 I :讲，无摩擦 
力的滑动球完全受重力控制，但滚动球的加速度是電力加速度的2/3。（细节可参考 A . P . 
French , Newtonian Mechanics , W . W . Norton , 1971, 652-3)。 也就是说，每平方秒 32 英尺乘以 
每英尺12英寸，乘以每英寸96像素，再乘以2/3,结果约为25000,可以计算出 GRAVITY , 
但我大大降低了速度。 

二维矢 最值在 计算涉及到二维加速度、速度和位貿时非常有用，因此第13章包含了 
Vector 2 结构。 

球需要保持滚动而不考虑 Accelerometer 的 ReadingChanged ，件触发，因此程序没有 
为该事件安装处理程序，而是通过 CompositionTarget . Rendering 获取当前值，应用于球。 
注意， Accelerometer 读数的 X 和 Y 分量用来创建 Vector 2 值，然后将其与 h —次的值进行 
平均，而上一次的值本身就是其上一个值的平均值，并依此类推。这是极简的平滑形式。 

项 H: TiltAndRoll I 文件： MainPage.xaml.cs 《片段） 
public sealed partial class MainPage : Page 
{ 

const double GRAVITY ■ 5000; // pixels per second squared 
const double BALL_RADIUS = 32; 

Accelerometer accelerometer = Accelerometer.GetDefault(); 

TimeSpan timeSpan; 

Vector2 acceleration; 

Vector2 ballPosition; 

Vector2 ballVelocity; 
public MainPage() 



ball.RadiusX = BALL 一 RADIUS; 
ball.RadiusY = BALL~RADIUS; 


Loaded += OnMainPageLoaded; 


async void OnMainPageLoaded(object sender, RoutedEventArgs args) 

if (accelerometer — null) 

{ 

await new MessageDialog("Accelerometer is not available").ShowAsyncO; 

) 

else 

{ 

CompositionTarget.Rendering += OnCOTipositionTargetRendering; 


void OnCompositionTargetRendering{object sender, object args) 

( 

AccelerometerReading reading = accelerometer.GetCurrentReading(); 
if (reading == null) 


// Get elapsed time since last event 

TimeSpan timeSpan = (args as RenderingEventArgs).RenderingTime; 
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double elapsedSeconds - (timeSpan - this.timeSpan).TotalSeconds; 
this.timeSpan = timeSpan; 

// Convert accelerometer reading to display coordinates 
double x = reading.AccelerationX; 
double y = -reading.AccelerationY; 


// Get current X-Y acceleration and smooth it 
acceleration = 0.5 * (acceleration + new Veccor2(x, y)); 


// Calculate new velocity and position 

ballVelocity += GRAVITY * acceleration • elapsedSeconds; 
ballPosition += ballVelocity * elapsedSeconds; 


Check for hitting edge 
(ballPosition.X - BALL_RADIUS < 0) 

ballPosition = new Veator2(BALL__RADIUS, ballPosition.Y 
ballVelocity = new Vector2(0, ballVelocity.Y); 


(ballPosition.> 

ballPosition = 
ballVelocity = nc 

(ballPosition.Y - 


Vector2( 


»is.ActualWidth) 

3.ActualWidth - 
ballVelocity.Y) 


ballPosition. 


ballPosition = new Vector2(ballPosition.> 
new Vector2(ballVelocity.> 


(ballPosition.^ 

ballPosition = 
ballVelocity : 


ball.C 


f Vector2(ballPosition.X, 
w Vector2(ballVelocity.> 

Point(ballPosition.> 


两项重要计 算为: 

ballVelocity += GR 
ballPosition += ballVelocity 


elapsedSeconds; 
elapsedSeconds; 


RADIUS); 


s.ActualHeight - 


请记住， acceleration、ballVelocity 和 ballPosition 都是 Vector 2 值，因此都具有 X 和 Y 
分 SU 速度増加/ acceleration 乘以运行时间，位背上升； T (速度乘以运行时 间)。 然 iil 只需 
耍做检汽新位 買是杏 在员 tflj 边界之外。如果是，移回到贞 曲内 fl . 速度的个分 ffi 设押为零。 

物理效果很茛实。如果增加和减小倾斜，球的加速度大小也相应增加和减少。此外， 
程序对速度和位 W 处理实际公忒， W 此容易 增加- 些反弹。有一个简中•方法是当球击中边 
缘时，不把速度分 摄设置 为零，而是设 W 为负值或之前的值。然而，这意味着球反弹 jfi 具 
冇相同速度的大小，而这不现实。设胃一个称为 BOUNCE 的衰减因子。 TiltAndBounce 程 
序和 TiltAndRoll 相同，只小过 BOUNCE 常吊:和 CompositionTarget.Rendering 处理程序中 
的球移动逻辑+同。 

项 H: TiltAndBounce | 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 


const double BOUNCE = -2.0 / 3; // fraction of velocity 


void OnCompositionTargetRendering(object sender, object args) 
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AccelerometerReading reading = accelerometer.GetCurrentReadingO; 
if (reading = null) 



TimeSpan timeSpan = (args as RenderingEventArgs).RenderingTime; 
double elapsedSeconds = (timeSpan - this.timeSpan).TotalSeconds; 
this.timeSpan = timeSpan; 

// Convert accelerometer reading to display coordinates 
double x = reading.AccelerationX; 
double y - -reading.AccelerationY; 


acceleration and smooth it 
* (acceleration + new Vector2(x. 


y)); 


// Calculate new velocity and position 

ballVelocity += GRAVITY • acceleration * elapsedSeconds; 
ballPosition += ballVelocity * elapsedSeconds; 


// Check for bouncing off edge 
bool needAnotherLoop = true; 


e (needAnotherLoop) 
needAnotherLoop = 1 



ballPosition = new Vector2 (-ballR>sition.X + 2 * BALL_RADIUS, ballPosition.Y); 
ballVelocity = new Vector2(BOUNCE * ballVelocity.X, ballVelocity.Y); 
needAnotherLoop = true; 

) 

else if (ballPosition.X + BALL_RADIUS > this.ActualWidth) 

{ 

ballPosition = new Vector2(-ballPosition.X + 2 • 



ballVelocity = new Vector2(BOUNCE * ballVelocity.X, ballVelocity.Y); 
needAnotherLoop = true; 



ballPosition = new Vector2 (ballPosition.X, -ballPosition.Y ♦ 2 * BALL_BADIUS); 
ballVelocity - new Vector2(ballVelocity.X, BOUNCE ， ballVelocity.Y); 
needAnotherLoop - true; 



-ballPosition.Y + 2 * 

(this.ActualHeight - BALL_RADIUS)); 
ballVelocity = new Vector2(ballVelocity.X # BOUNCE * ballVelocity.Y); 
needAnotherLoop = true; 

) 

) 

ball.Center = new Point(ballPosition.X, ballPosition.Y); 


在 TiltAndRoll 程序中，球可能在同一事件中超越两个相邻边缘，但这种情况需要用一 
系列 if 语句进行处理。在该程序中.球从一个边缘 反弹吋 能会跨过另一边，也就是说，循 
环需要反复测试球的位置，直到没有反弹。 







18.4 两个北极 


虽然加速计能告诉你哪条路向下跌，但并没有揭示设备在三维空间的完整方向。 要搞 
明 fl 我的总思，志要在手持设备 I :运行 AccelerometerAndSimpleOrientation 程序。 站起来 HJ 
一些奇怪的方忒拿着设备。加速汁会告诉你哪个方向向卜、现在，整个身体绕一平板 
电脑在空间旋转360度，但加速 il •报告的值几乎相同，因为方向向 卜对丁 •装背而言仍然 
不变。 

如果把平板电脑以加速度矢最转一圈，有什么变化？答案之 一是： 相对于平板电 脑的 
北方。这就是为什么罗盘传感器 如此重 要的 原因： 罗盘提供决定平板电脑方向的缺失因素。 
由罗盘和加速 il •相结合，就吋以推导出平板电脑在7维空间的完整方向。或者也可以让 
Windows 来完成。 

Compass 炎的结构非常类似 [ Accelerometer . 并且 CompassReading 类有两个属性，分 
别为： HeadingMagneticNorth 和 HeadingTrueNorth 。 这吗都是以度为中-位的角度， 并且敁 > J 々 
计算机相对丁•北方的角度。如果平板电脑平行于地球放黃，则角度应该接近于零，指向屏 
辂的顶部为北方。（我指的“顶”是指本章前 Ifli 所示图中正 Y 轴方向。>如果让平板电脑屏 
«朝向东，则角度增大。 

当然，这些角度在世羿各地的某些位 S 并不相同。平板电脑中包含磁力计，会响应磁 
北极(勺地球磁场对 齐}, 所以正北指地球 I 制绕旋转的轴线。注意， HeadingMagneticNorth 属 
件是 double 类艰，但 HeadingTrueNorth 是 uj ■空 double 类型，暗$该值不 Hf 用。 

我们来试试。 SimpleCompass 项 H 的 XAML 文件定义了两个图形箭头，其源点在屏幕 
中心，并且竖直向上。 

项目 ： SimpleCompass I 文件： MainPage.xaml(iVS) 

<Grid Backgrounds"{StaticResource ApplicationPageBackgroundThemeBrush >"> 

<Canvas HorizontalAlignmervt="Center" 

VerticalAlignment="Center"> 

<Path Fill-.'Magenta" 



<RotateTransform x:Name=*'trueNorthRotate" /> 
</Path.RenderTrans form> 



有两个帮助记忆的颜色， Magenta ( 洋红 ) 代表地磁北极， Blue ( 蓝 ) 代表地理北极。 
如果 HeadingTrueNorth 的值为 null, 代码隐藏文件会隐藏第二个 Path 。 

项 SimpleConpass I 文件： MainPage.xaml.cs ( 片段 > 
public sealed partial class MainPage : Page 
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magNorthRotate.Angle = -compassReading.HeadingMagneticNorth; 


if (compassReading.HeadingTrueNorth.HasValue) 

( 

trueNorthPath.Visibility = Visibility.Visible; 
trueNorthRotate.Angle = -compassReading.HeadingTrueNorth.Value; 



trueNorthPath.Visibility = Visibility.Collapsed; 


iff 注意.两个箭头的旋转角度设定为 HeadingMagneticNorth 和 HeadingTrueNorth 属性 
的负数。这些值表示计算机相对于北极的转动，因此箭头需要相对转动，并 M 示相对于汁 
算机的北极方向。 

在我一直为木节使用的两台平板电脑上(包括微软 Surface ), 结果令人失望。两台机器 
上 HeadingTrueNorth 值始终为 null 。 在微软 Surface 上，地磁北极价值相当不稳定。在三 
星平板电脑上，只有范围从0到180度的值！在我的 Technical Editor 的平板电脑 h , 
HeadingMagneticNorth 始终为0。 

从理论上讲，地磁北极如果知道计算机位置，则 uj •以计算地理北极，但 
Package . appxmanifest 的定位能力没有起到帮助作用。 

不过，我们吋以祈求好运，希望罗盘硬件能够结合加速计数据好好 I :作并提供完整的 





方位信息。 


18.5 陀螺仪=加速计+罗盘 


有两个类从内部结合加速计和罗盘数据并平滑结果， Inclinometer (陀 螺仪) 传感器是两 
者之一。 Inclinometer 类提供 yaw (偏航 角}、 pitch (俯仰角)和 roll (滚转角)信息，这些都是飞 
行动力学所使用的术语。 

偏航角、俯仰角和滚转角经常称为欧拉，得名于18世纪探 索三维 旋转数学的数学家莱 
昂哈德•欧拉。如果你正在驾驶 m , 偏航角表示飞机机头所面对的罗盘方向。如果6机 
向左或向右改变方向，偏航角则随之改变。俯仰角指飞机机头的 角度。 由于机头往上爬升 
和卜降 俯冲，俯仰角也随之改变。滚转角由向左或向右倾斜实现。 

要理解如何应用 T •计算机，你吋能想让平板电脑像魔毯一样自己能 “ 。假设你十. 

沾顶端的谠起 M 当然是以平板电脑的原生方位/在之前章节所示的张标系统中， 
偏航角绕 Z 轴旋转，俯仰角绕 X 轴转动，而滚转角绕 Y 轴旋转。 

YawPitchRolI 程序还可以帮助你以视觉方式表达这些角度。 XAML 文件包含一些用于 
线条的 Rectangle 元桌、一些用于滚动球的 Ellipse 元素以及一些文字。 


： : . } ： V ' l ^' ■- & - M 善為 , Mi 誠 ㈤ 


〈Rectangle Fill-"Red" 

Height="3" 

HorizontalAlignment= H Stretch" 
VerticalAlignment="Center w /> 


h.Data> 

<EllipseGeometry 

th.Data> 


"rollEllipse" RadiusX="20 M RadiusY="20" 


<RowDefinition Height=" 
<RowDefinition Height=" 
id.RowDefinitions> 


</Grid.RowDefinitions> 

<Grid.ColumnDefinitions 》 

<ColunmDefinition Width= 
<ColumnDefinition Width; 
</Grid.ColumnDefinitions> 
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<TextBlock 


Foreg round:"Blue" 
HorizontalAlignment="Right" 
Margin= H 0 0 24 0 M /> 


<TextBlock 


Name:"pitchValue" 

Grid.Row="0" 

Grid.Column="l" 

Foreground="Blue" 

HorizontalAlignment='* 


<TextBlock Text="ROLL" 

Grid.Row="l" 

Grid.Column="0" 

Foreground="Red" 

Hor i zon t a 1A1 ignmen t=•• Le f t •• 
VerticalAlignment="Top" 
Margin="0 108 0 0"> 
<TextBlock.RenderTransform> 

<RotateTransform Angle="-90'* 
</TextBlock.RenderTransform> 
</TextBlock> 

<TextBlock Name="rollvalue" 
Grid.Row="0" 
Grid.Column= M 0 H 
Foreground: •• Red" 
HorizontalAlignment="Left" 
VerticalAliqnment="Bottom": 
<TextBlock.RenderTransform> 

<RotateTransform Angle="-90" 
</TextBlock.RenderTransform> 
</TextBlock> 


〈Grid Grid.Row:"0" 

Grid.Column="l" 

HorizontalAlignment="Stretch" 
VerticalAlignment="Bottom" 
RenderTransformOrigin="0 1"> 

<StackPanel Orientation="Horizontal" 

HorizontalAlignment«="Center"> 
〈TextBlock Text="YAW = " Foreground="Green" /: 
<TextBlock Name="yawValue ，， Foreground:"Green" 
</StackPanel> 

〈Rectangle Fill="Green" 

Height 謙 "3" 

HorizontalAlignment="Stretch" 

Vertica1A1ignment="Bottom" /> 


d•RenderTransform> 
<TransforroGroup> 

<RotateTransform 

<RotateTransform 

</TransformGroup> 

id.RenderTransform> 


"-90" /> 
=’’yawRotate •’ 


</Grid> 


从代码隐藏文件中可以看到， Inclinometer 类实例化，而且用得与 Accelerometer 及 




一样多。 

YawPitchRoll I 文件 ： Main Page. xaml. cs (>5'©) 
ic sealed partial class MainPage : Page 

inometer inclinometer = Inclinometer.GetDefault() : 






DisplayProperties.AutoRotationPreferences 
L>oaded += OnMa i n Page Loaded; 


j.* 


OnMainPageLoaded(object sehder, RoutedEventArc 





ShowYawPitchRoll(inclinometer.GetCurrentReading 
inclinometer.ReportInterval = inclinometer.Minii 
inclinometer.ReadingChanged += OnlnclinometerRe. 
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this.ActualHeight * (-90 - pitch) / 180) ; 



没有罗盘数据秘密来源为陀螺仪提供信息。作为 Compass 读数， YawDegrees 属性+ 15 
定(或有 限)， 但能补足，即 YawDegrees 与 Compass 读数之和总是约等丁 360。如果平板屏 
嵇 t 升到一个水平面，偏航线会指向北(或在附近)， R 俯仰球和滚转球的均位丁•中心。如 
果向 I :或向下倾斜平板电脑顶部， PitchDegrees 范围从平板电脑竖直时的90度到顶点向下 
时的 -90 度。如果平板电脑向右或向左倾斜， RollDegrees 范围从90度到 - 90度。 卜图 所示 
为平板电脑的顶部和左侧都提升时的视图。 



如果屏幕朝 K ， YawDegrees 则指向南， PitchDegrees 值范围从90度辛:180度、从 -90 
度到 -180 度。程序用空心红球代表这些值。 

如果 IH 在处理的程序中会有某些东 W 绕着屏幕飞来 V 去，这些欧拉角可能就是你需要 
的。然而， 你町 能想要更数学化的东这就是 K 一个 类的 目的。 

18.6 OrientationSensor (方向传感器 ） =加速计+罗盘 

有几种三维空间方式代表旋转，这些方式彼此之间都坷以进行转换 。 OrientationSensor 
类 1 j Inclinometer 从某 种总义 1:非常相似，因为 OrientationSensor 类结合了来自加速 U •和罗 
盘的信息并 在三维 空间提供完整方位。 OrientationSensor 通过两个类的实例提供 定位： 

• SensorQuatemion 

• SensorRotationMatrix 

四儿数在数学上非常有趣。就像虚数就<以表示在两维空间的旋转•柞，四元数表尔 
在三维空间的旋转。游戏程序员尤其喜欢代表旋转的四元数，因为 吋 以平消插入四允数。 

旋转矩阵是一个没有最后一排及最后一列的规则变换矩阵。规则三维变换矩阵为4行 
4列。 SensorRotationMatrix 类定义了 3行3列。这种矩阵小能代表平移或视角，并 ft 按照 
惯例没有缩放和倾斜。但 SensorRotationMatrix 类 在三维 空间很容易用 丁旋转 对象。 
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在我写本书时所用的三星平板电脑上， SensorRotationMatrix 包含所有零值，因此本节 
中使用该矩阵的程序都不起作用。 Microsoft Surface 的结果更好。 

处理该旋转矩阵的时候，换个角度看可能有所帮助。我描述过 Accelerometer 和 
Compass 的值如何相对丁•本章前面已经讲过的 3D 坐标 系统。 处理来自 OrientationSensor 类 
的旋转矩阵工作时，这样有助于可视化两个 3 D 來标系统，一个用于设备，而另一个用于 
地球： 

• 在计算机 3D 坐标系统中，正 Y 指向屏幕顶部，正 X 正指向右边，而正 Z 轴指向 
屏幕之外，正如我之前展示的 

• 在地球坐标系统中，正 Y 指向北，正 X 指向东，而正 Z 轴从地面垂直向上 
如果电脑屏幕朝上、顶端向北，放在水平表面，两个坐标系统则一致。（理论 

l；)SensorRotationMatrix 变为恒等矩阵： Is 在对角线，其他为 Os 。 否则，该矩阵会描述地 
球如何相对于计算机旋转，而 il •算机是由欧拉角所描述的旋转对立面。 

AxisAngleRotation 程序演示了这种差异，程序还会计算代表三维空间旋转另一种方 
法，即围绕三维矢最的旋转。 XAML 文件由一些无趣的 TextBlock 元素、功能标签和其他 
3待文木紺合而成。 


项 AxisAngleRotation I 文件： MainPage.xaml ( 片段 ) 
<Page ... > 



<Style x:Key="DefaultTextBlockStyle" TargetType="TextBlock H > 

<Setter Property-"FontFamily" Value® M Lucida Sans Unicode" /> 
<Setter Property="FontSize" Value="36" /> 



</Style> 


<Style x:Key» n rightText" TargetType="TextBlock" 

BasedOn="{StaticResource DefaultTextBlockStyle}"> 

<Setter Property="TextAlignment" Value-"Righf /> 

<Setter Property*"Margin" Value="48 0 0 0" /> 

</Style> 

</Page.Resources 〉 

<Grid Background-"{StaticResource ApplicationPageBackgroundThemeBrush)"> 
<StackPanel HorizontalAlignment="Center" 

VerticalAlignment=''Center"> 


<!-• Grid showing Pitch, Roll, and Yaw --> 
<Grid HorizontalAlignnvent- H Center'*> 



<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto H /> 



<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto" /> 
<ColumnDefinition Width="Auto" /> 
</Grid.ColumnDefinitions> 


<Style TargetType=" 

BasedOn-"{StaticResource DefaultTextBlockStyle)" 
id.Resources> 


〈TextBlock Text=”Pitch: " Grid.Row="0” Grid.Column= ,, 0" /> 
<TextBlock Name="pitchText" Grid.Row="0" Grid.Column=T 
Style= M {StaticResource rightText)" /> 
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<TextBlock Text="Roll: " Grid.Row="l" Grid.Column="0" /> 
<TextBlock Name= M rollText" Grid.Row*" 1** Grid.Column=" 1" 
Style= n [StaticResource rightText}" /> 


<TextBlock Text="Yaw: " Grid.Row="2" Grid.Column= M 0" /> 
<TextBlock Name="yawText" Grid.Row="2" Grid.Column-"1" 
Style="{StaticResource rightText}" /> 

</Grid> 


<! ― Grid for 
〈Grid HorizontalAlignroenf"Center" 
Margin="0 48"> 

<Grid.RowDefinitions> 

<RowDefinition Height:"Auto" 
<RowDefinition Height-"Auto" 
<RowDefinition Height:"Auto” 
</Grid.RowDefinitions> 


/> 

/> 

/> 


<Grid.C 


<Col 


.umnDefi 
umnDefi 


finitions> 

on Width-"Auto” 


<ColumnDefinition Width="Auto" 
<ColumnDefinition Width= M Auto" 


/> 

/> 

/> 


〈 /Grid.ColumnDefinitions 〉 



<Style TargetType="TextBlock" BasedOn= M (StaticResource rightText)" /> 
</Grid.Resources> 


<TextBlock Name= M mllText n Grid.Row="0 M Grid.Column="0" /> 
<TextBlock Name="ml2Texf Grid.Row="0" Grid.Column="l" /> 
<TextBlock Name= n ml3Text" Grid.Row= H 0 M Grid.Column="2" /> 


<TextBlock Name="m21Text" Grid.Row="l" Grid.Column= ,, 0" /> 
<TextBlock Name="m22Text" Grid.Row="l" Grid.Column="l M /> 
<TextBlock Name="m23Texf , Grid.Row= M l" Grid.Column= M 2 M /> 


<TextBlock Name-"m31Text" Grid.Row»"2" 
<TextBlock Name="m32Text" Grid.Row="2" 
<TextBlock Name= n m33Text" Grid.Row="2" 
d> 


Grid.Column="0" /> 
Grid• Column:" 1 •’ /> 
Grid.Column= M 2 - /> 


is/Angle rotation display --> 
HorizontalAlignment="Center"> 
cGrid.RowDefinitions> 


<RowDefinition Height»"Auto" 
<RowDefinition Height="Auto" 


/> 

/> 











代码隐藏文件实例化 Inclinometer , 获得偏航角、俯仰角和滚转角，还实例化 
OrientationSensor ， 获得(并显旋较矩阵，并将其较换力轴/角 旋的。 

项 AxisAngleRotation | 义件： MainPage.xaml.cs (IV 段 } 
public sealed partial class MainPage : Page 
{ 

Inclinometer inclinometer = Inclinometer.GetDefault{); 

OrientationSensor orientationSensor = OrientationSensor.GetDefault(); 


public MainPage() 

( 

this.InitializeComponent(); 

DisplayProperties.AutoRotationPreferences = DisplayProperties.NativeOrientation; 
Loaded += OnMainPageLoaded; 


async void OnMainPageLoaded(object sender, RoutedEventArgs args) 

{ 

if (inclinometer == null) 

( 

await new MessageDialog("Inclinometer is not available">.ShowAsync(); 

) 

else 

( 

II Start the Inclinometer events 

ShowYawPiCchRoll(inclinometer.GetCurrentReadingO); 
inclinometer.ReadingChanged += OnlnclinometerReadingChanged; 

} 

if (orientationSensor = null) 

{ 

await new MessageDialog("OrientationSensor is not available").ShowAsync(); 

} 

else 

{ 

// Start the OrientationSensor events 
ShowOrientation(orientationSensor.GetCurrentReading()); 
orientate onSensor.ReadingChanged += OrientationSensorChanged; 


async void OnInclinometerReadingChanged(Inclinometer sender, 

InclinometerReadingChangedEventArgs args) 

{ 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()-> 
ShowYawPitchRoll(args.Reading); 

»)； 


void ShowYawPitchRoll(InclinometerReading inc1inometerReading) 







double twoSine = 2 * Math.Sin(angle); 

double x = (matrix.M23 - matrix.M32) / twoSine; 

double y = (matrix.M31 - matrix.M13) / twoSine; 



axisText.Text = String.Format("((0:F2) (1:F2) (2:F2)) M , x, y, z); 


卜‘图所示屏幕截图来 ft Microsoft Surface , 乇个欧拉角在顶部，中间为旋转矩阵，底部 
为派牛轴/角旋转。 



对于该屏幕截图，我保持平板电脑大致朝北，因此偏航角几乎为零。平板电脑向左倾 
斜一点点，滚转角会变负。但我已46度提高平板电脑顶部。屏幕底部显尔了来自旋转矩阵 
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的相同角度。但看一看轴，非常接近矢景(-1，0, 0)，为负 X 轴。使用右手法则，把拇指 
指向负 X 轴方向。手指蜷缩表示正角度旋转的方向，因此证实了我前面 讲的： 旋转矩阵描 
述了地球相对丁-计算机的旋转。 

也就是说，如果想用旋转矩阵来表示电脑相对于地球的旋转，则需要反转矩阵。 
SensorRotationMatrix 类本身不会反转，但 Matrix 3 D 结构可以反转。（注意， \1 atrix 3 D 在 
Windows . Ul . Xaml . Media . Media 3 D 命名空间中进行定义，并结合 Matrix 3 DProjection 使用。> 
非常容易从 SensorRotationMatrix 对象创建 Matrix 3 D 值，然后冉翻转。 

接下来我要使用该方法在 3 D 空间中创建另一种方位代表形式。 

18.7 方位角和海拔 

从概念上讲，我们生活在一个天体内。如果需要描述在 3 D 空间中相对于自己位置的 
对象，距离并不重要，相对丁-这个地球的点非常方便。地球尤其适合让你通过电脑屏幕看 
到虚拟现实及增强现实。在这类程序中，手拿平板电脑，就好像用平板背面的摄像头进行 
拍照，但在屏幕1：所看到的东西是基于屏樁方位(全部或部分>巾程序而牛.成的。如果以弧 
线平移屏辎，则可以看到世界的不同部分。 

地球在陆地范围有熟悉的模拟。如果 耑要确 定地球 I :的位置，我们会使用经纬度，两 
苒都是与地球中心顶点的夹角。从概念上讲，我们通过赤道把地球分为两半。纬度 线与赤 
道平行，以正角测量赤道以北 ( S 大为90度，在北极)，以负角测暈赤道以南(到南极的 -90 
度)。 经度角度 基丁通 过以本初子午线测最两极的大圆.本初子午线是通过英格竺格林尼治 
的经线。 

我们可以以大致相同的方式描述地球上的点，但如果我们在球体中心往外看，就+ 
同了。 

向任怠方向 伸出手 R 。 我们怎样才能确定位置？第一，向上或向下摆动手臂，让手忾 
保持水平，让手臂与地球表面平行。在运动期间在手臂摆动产生的角度称为海拔。 

正海拔值卨于地 平线； 而负值则低于地平线。竖育向上称为最高点，即海拔为90度。 
竖肓向卜成为最底点，即海拔为 -90 度。 

此时手 朽仍然 指向地平线，对吗？现在，摆动手朽指向北方。刚刚手臂第二次摆动形 
成的角称为“方位角”。 

总之，海拔和方位角构成地平坐标，如此命名是因为地平线将地球分为两半，类似于 
地面來标中的赤道。 

地平啤标没有距离信息。在日食过程中，太阳和月亮有相同地平坐标。地平坐标不是 
在 3 D 空间中的位賈，而是从观看者的角度在 3 D 空间中的方向。就此意义而言，地平坐标 
像 3 D 矢最，而+同的是，矢量用直角叱标表达，而地平來标为球形。 

为了让推导水平坐标的:1:作容易一点，我们先定义一个 Vector 3 结构来封装 3 D 矢量。 

项 EarthlyDelights I 文件： Vector3.cs 



using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Media.Media3D; 
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// Static methods 

public static Vector3 Cross(Vector3 vl, Vector3 



return 


public static Vector3 operator -(Vector3 v) 



这种结构有很多优点，包括传统点积和乂积，还有通过 Matrix 3 D 值乘以 Vectort 值的 
Transform 方法。在实践中，这个 Matrix 3 D 值可能代表的是旋转，乘法吋以有效旋转 3 D 
空间中的矢 ffi 。 

如果把平板电脑放在空中，看着屏幕，我们就在寻找相对于计算机平标系统的方向， 
尤其是穿过屏 樁背面 的矢最方向.即负 Z 轴或(0,0，-1>。我们需要将其转换为地平嗲标。 
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基于 OrientationSensor 所提供的 SensorRotationMatrix 对象，我们创建一个名为 matrix 
的 Matrix3D 值。该值可以反转，表示从计算机來标系到地球少标系统的 变换： 

matrix.Invert() ; 

利用该矩阵把 (0, 0, - 矢量(由 Vector3 结构提供的静态 unitz 属性的负值)变换为地球 
直角少 标系： 

Vector 3 vector = Vector3.Transform(-Vector3.UnitZ, matrix); 

该矢最在直角嫩标系中，需要转换为地平坐标。回想一下在地球平标系中， z 乎标指 
向地球之外。如果平板电脑保持竖直.穿过设备背面并转化为地球屯标的轴有 z 分最，为 
苓。这意味着，可以通过从二维笛卡儿坐标到极平标的众所周知转换而计算方位角，我们 
把它从弧度转换为 角度： 

double azimuth = 18Cf * Math.Atan2(vector.X, vector.Y> / Math.PI; 

不管怎么变换矢景的 Z 分 M , 该公式实际上都有效。海拔范围只在负90度和正90度 
之间，因此，可以用反正弦函数汁算： 

double altitude = 180 • Math.Asin(vector.Z) / Math.PI; 

但我们少了一些东西。我们已经把厂维旋转矩阵转换为只有两个姐件的乎标，因为它 
只限于地球表面。如果把平板电脑指向地球中的东西，然后绕轴旋转，会发生什么？海拔 
和方位一样， 但电脑 屏幕上的画面会通过旋转而改变。该缺失部分有时也称为倾斜 ( tut )。 
计算倾斜有点难，但 HorizontalCoordinate 结构显示了数学方法。 


项 H: EarthlyDelights I 文件 ： Horizont 
using System; 

using Windows.UI.Xaml.Media.Media3D; 
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II Transform <0, 0, -1) -- the vector extending from the lens 
Vector3 zAxisTransforroed - Vector3.Transform(-Vector3.UnitZ, matrix); 



II tma tne tneoteticax nociu^ausi.ui.iucu 了 i 

// if the device is upright 
double yUprightAltitude = 0; 
double yUprightAzimuth = 0; 

if (horzCoord.Altitude > 0) 

( 

yUprightAltitude = 90 - horzCoord.Altitude; 
yUprightAzimuth = 180 + horzCoord.Azimuth; 

else 

l 

yUprightAltitude 二 90 + horzCoord.Altitude; 
yUprightAzimuth = horzCoord.Azimuth; 

} 

Vector3 yUprightVector = 

new HorizontalCoordinate(yUprightAzimuth, yUprightAltitude).ToVector(); 

// Find the real transformed +Y vector 

Vector3 yAxisTransfornved = Vector3.Transform(Vector3.UnitY, matrix); 

// Get the angle between the upright +Y vector and the real transformed +X vector 
double dotProduct 二 Vector3.Dot(yUprightVector, yAxisTransformed); 

Vector3 crossProduct = Vector3.Cross(yUprightVector, yAxisTransformed); 
crossProduct = crossProduct.Normalized; 
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有了转换.就可以写一个天文程序来根据如何定位屏辂显示夜空的特定部分，很像我 
2012年10月发表于 MSDN Magazine 匕的-•个 Windows Phone 7.5 程序。但我们现在要做 
的东四仍然有一点模糊。 

如果你想的位图比电脑屏辂大，但你+想缩小位阁来适合屏幕，该怎么办？传统解决 
方案是使用滚动条。但有一个更现代的解决方案，让你能用手指来移动位图。 

但另一种方法是将位阁放在地球内饰。把平板电脑举向空中，改变屏幕方向来査肴该 
图片。当然，我们并+希 绢真正 拉伸位1旬，使位图适合符合地球内饰！⑷以 K 接使用水平 
滚动的方位角和萌宵滚动的海拔。 

EarthlyDelights 程序允许你汽看一张大位图 (7793*4409 像疾> 该位图是500年前希罗 
尼穆斯•博斯 (Hieronymus Bosch)> 所绘的油副《人间乐岡 》 (The Garden of Earthly Delights )。 
程序从维 祛百科卜战 图片。 K 图是程序运行在 Surface ll 所 M/j; •的一部分阁片。 


程序没有扫描或缩放阁片的交互界曲。而是完全基于改变屏禅方向。然而，如果点击屏 
幕，程序会应用缩放,把整张图片用在 il: 常模 K 卜叮饩符部分视阁的矩形來! liU、 (见下图)。 



第 18 章传感器与 GPS 


787 


虽然这个功能会使程序复杂化，但我发现它非常重要。 

XAML 文件中最重要的部分很明显是 Image 元素。注意， Image 的 Stretch 属性 设置为 
None , 并包含+带 URI 源的 Bitmaplmage 对象。包含 Image 的 Grid 在 Canvas 中，以便大 
于屏幕时(而且会 大于) 不至于被剪切掉。 


项 R: EarthlyDelights | 文件： MainPage.xaml ( 片段 > 

i="{StaticResource ApplicationPageBackgroundThemeBrush)"> 
:ems displayed only during downloading --> 

: ProgressBar Nan\e="progressBar" 

VerticalAlignment="Center" 

Margin="96 0" /> 



Text= M downloading image..." 
HorizoncalAlignment="Center" 
VerticalAlignment="Center" /> 



<BitmapImage x:Name= w bitinapImage" 

DownloadProgress="OnBitmapImageDownloadProgress" 
ImageFailed="OnBitmapImageFailed" 

ImageOpened="OnBitmapImageOpened" /> 

</Image.Source> 

</Image> 


<Border Name="outlineBorder" 
BorderBrush="White M 
HorizontalAlignment="Left" 
VerticalAlignment= n Top"> 


〈Rectangle Name="outlineRectangle" 



<CompositeTransform x : Name="imageTrans form" /> 
</Grid.RenderTransform> 


</Grid> 

</Canvas> 



内嵌 Rectangle 的 Border 用于缩小视图，显氺通常占整个屏幕图片的一部分，但在普 
通视图卜 '也 kT 以肴到这个 矩形。 外部的 CompositeTransform 适用于 Image 和 Border 。 在齊 
通视图中，什么也+做。内部 CompositeTransform 会把 Border 定位到普通模式 Hf 见的相同 
图片区域。 

Loaded 处理程序检奋 OrientationSensor 是否卩 J ■用，如果 " J ■用，则直接设 M Bitmaplmage 
对象的 UriSource 属性并 开始下 载。如果位图下载成功，则可以获取像素尺、』•，同时把贞 
尺寸保存为字段。 


项 H: EarthlyDelights | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage: Page 
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// Save image dimensions 

imageWidth = bitmaplmage.PixelWidth; 

imageHeight = bitmaplmage.PixelHeight; 

titleText.Text = String.Format CM 0} ({l)\x00D7{2)) title, imageWidth, imageHeight); 
// Initialize image transforms 

zoomlnScale = Math.Min(pageWidth / imageWidth, pageHeight / imageHeight); 

// Start OrientationSensor going 
if (orientationSensor !- null) 

{ 

ProcessNewOrientationReading(orientationSensor.GetCurrentReading(>>; 
orientationSensor.ReportInterval = orientationSensor.MininujmReportlnterval; 
orientationSensor.ReadingChanged += OnOrientationSensorReadingChanged; 


async void OnOrientationSensorReadingChanged(OrientationSensor sender. 

OrientationSensorReadingChangedEventArgs args) 

( 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, 0 => 

( 

ProcessNewOrientationReading(args.Reading); 

})； 


ProcessNewOrientationReading 方法创建来自 SensorRotationMatrix 的 Matrix 3 D 对象， 
并通过它推导 HorizontalCoordinate 值。 

项月 ： EarthlyDelights I 文件： MainPage.xaml.cs ( 片 段） 

void ProcessNewOrientationReading(OrientationSensorReading orientationReading) 

{ 

if (orientationReading = null) 
return; 

// Get the rotation matrix & convert to horizontal coordinates 
SensorRotationMatrix m = orientationReading.RotationMatrix; 

if (m ■■ null) 
return; 

Matrix3D matrix3d = new Matrix3D(m.Mll/ m.M12, m.M13, 0, 

m.M21, m.M22, m.M23, 0, 

m.M31, m.M32, m.M33, 0, 

0, 0, 0, 1); 

if (!matrix3d.HasInverse) 
return; 

HorizontalCoordinate horzCoord = HorizontalCoordinate.FromMotionMatrix(matrix3d); 

II Set the transform center on the Image element 
imageTransform.CenterX = (imageWidth + maxDimension) * 

(180 + horzCoord.Azimuth) / 360 - maxDimension / 2; 
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该方法负责设置一些变换，其他变化都在 UpdatelmageTransforms 方法中(在方法末尾 
会看到调用 UpdatelmageTransforms ) 设置。如果方位角为 0( 平板电脑指向北极时)、海拔为 
0( 平板电脑竖直时)， centerX 和 CenterY 属 性设置 为位图中心。否则，设置为整个宽度和卨 
度，并包括不显示图片的环绕区域边缘(否则，方案会需要 M 示屏幕左侧显示位图的右边缘 
以及在屏痛右侧显示位图的左边 缘。） 

我想让缩放操作采用动 W 形式，冈此指定了 MainPage 依赖属性，点击屏幕时，该依赖 
属性就成为动画目标^ 


项目 ： EarthlyDelights | 文件： MainPage.> 
public sealed partial class MainPage : 


Dependency property for zoom-in transition animation 
atic readonly DependencyProperty interpolationFactorProperty 
DependencyProperty.Register("InterpolationFactor", 

typeof(double), 
typeof(MainPage), 


b r $ ■ !Mi 


EnableDependentAnimation 
To = isZoomView ? 0 : 1, 


Storyboard.SetTarget(doubleAnimation, this); 
Storyboard.SetTargetProperty(doubleAnimation, 
Storyboard storyboard = new Storyboard(); 
storyboard.Children.Add(doubleAnimation); 
storyboard.Begin(); 


"InterpolationFactor"); 


?.OnTapped(e); 


static void OnlnterpolationFactorChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs 


OnlnterpolationFactorChanged 方法还会调用 UpdatelmageTransforms 来究成大部 分繁甫 
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项 fl: EarthlyDelights | 文件： MainPage.xaml .cs < 片段） 
void UpdatelmageTransforms() 

{ 

// If being zoomed out, set scaling 

double interpolatedScale = 1 + InterpolationFactor * (zoomlnScale - 1); 
imageTransform.ScaleX = 

imageTransform.SealeY - interpolatedScale; 


// Move transform center to screen center 

imageTransform.TranslateX = pageWidth / 2 - imageTransform.CenterX; 
imageTransform.TranslateY - pageHeight / 2 - imageTransform.CenterY; 


// If being zoomed out, adjust for scaling 
imageTransform.TranslateX -= InterpolationFactor * 
(pageWidth / 2 - zoomlnScale • 
imageTransform.TranslateY -= InterpolationFactor * 
(pageHeight / 2 - zoomlnScale * 


"If being zoomed out, center image in screen 
imageTransform.TranslateX += InterpolationFactor * 

(pageWidth - zoomlnScale * imageWidth) / 2; 
imageTransform.TranslateY += InterpolationFactor * 

(pageHeight - zoomlnScale * imageHeight) / 2; 



outlineBorder.BorderThickness - new Thickness(2 / interpolatedScale); 
outlineRectangle.StrokeThickness = 2 / interpolatedScale; 


imageTransform.Rotation = (1 - InterpolationFactor) 
borderTransform.Rotation = -rotation; 


rotation; 


如果有新的 OrientationSensor 值或者缩放操作的 InterpolationFactor 属性改变，就调用 
该方法。如果你有兴趣了解该方法如何 T 作，则需要消除所有插值代码来进行消理。把 
InterpolationFactor 设置为0，再设置为1，就会发现方法非常直观。 


18.8 必应地图和必应地图图块 

Geolocator 类没有被当成是传感器，它完全位于另一个命名空间 
Windows . Devices . Geolocation 。 然而， Geolocator 类启用相类似，会告诉你电脑什么时候改 
变了地理位 K 以及新位置是什么。 

你志要在 Package . appxmanifest 文件的 Capabilities 部分特别指出应用要求位置信息。 
用户第一次运行程序时 ， Windows 8会得到确认。 

-般情况 K , 要结合地图来使用 Geolocatoi •位 S。Windows 8没有内置必应地图控件， 
但 " J * 以卜 '载 I :]!； 包把它添加到应用。访问 www . bingmapsportaI . com 可以获取所需要的证书 

密钥。 

但我要为木章—个程序采用一种稍微不同的方法。我要展示基丁-平板电脑定位来 
旋转的地图。这种旋转允许地图 h 的北方与实际北方(或平板电脑所认为的北方)保持一致。 
为了做到这一点，我小使用必应地阁控件，而是通过 Bing Maps SOAP 服务卜'战中.个图块， 
然后拼接成一张复合地图。当然，还是耑要证书密 钥的。 

运行 RotatingMap 程序时，你会想用手指浏览和缩放地图。但行小通。程序没有触控 
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界面！为简单起见，程序直接以当前位置为地图中心，如果位置变化，则重新定位地图。 
程序提供应用栏按钮进行放大和缩小并可以在道路和鸟瞰视图之间进行切换，但仅此 而己。 

以下为 XAML 文件。所有构成地图的图块都进入名为 imageCanvas 的 Canvas 。 注意， 
RotateTransform 围绕其中心旋转 Canvas 。 

项目： RotatingMap | 文件： Main Page, xaml ( 片段） 

<Page ... > 

<Grid Background="(StaticResource ApplicationPageBackgroundThemeBrush)"> 

<Canvas Name="imageCanvas" 

HorizontalAlignment="Center M 

VerticalAlignment*’’Center"> 

<Canvas•RenderTransform> 

<RotateTransfonn x : Name="imageCanvasRotate" /> 

</Canvas.RenderTransform> 

</Canvas> 

<!-- Circle to show location --> 

〈Ellipse Name="locationDisplay" 

Width="24" 

Height="24" 

Stroke*"Red" 

StrokeThickness="6" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Visibility= M Collapsed" /> 

<!-- Arrow to show north --> 

<Border HorizontalAlignment="Left" 

VerticalAlignment="Top" 

Margin="12" 



Width="36" 
Height="36 M 
CornerRadius="18"> 


<Path Stroke= ,, White" 

StrokeThickness="3" 

Data= M M 18 4 L 18 24 M 12 12 L 18 4 24 12"> 
<Path.RenderTransform> 

<RotateTransform x:Name= M northArrowRotate" 
CenterX="18" 

CenterY="18" /> 

</Path.RenderTrans form> 

</Path> 

</Border> 

<!-- "powered by bing" display --> 

<Border Background="Black" 



CornerRadius= M 12 M 



<StackPanel Name="poweredByDisplay" 
Orientation= M Horizontal n 



<TextBlock Text=" powered by " 

Foreground="White" 

VerticalAlignment="Center" /> 

<Image Stretch="None"> 

<Image.Source> 

<BitmapImage x : Name="poweredByBitmap" /> 
</Image.Source> 

</Image> 

</StackPanel> 



<Page.BottomAppBar> 

<AppBar Name="bottomAppBar" 
IsEnabled="False"> 



AppBarButtonStyle to use it for a CheckBox --> 

<CheckBox Name="stree t V ie wAppBa r Bu t ton" 

Style= w {StaticResource StreetAppBarButtonStyle} 
AutomationProperties. Name="Street View** 
Checked="OnStreetViewAppBarButtonChecked" 
Unchecked="OnStreetViewAppBarButtonChecked" /> 

<Button Name="zoomInAppBarButton" 

Style= M (StaticResource ZoomlnAppBarButtonStyle)" 
Click="OnZoofnInAppBarButtonClicJc" /> 

<Button Name="zoomOutAppBa rButton" 

Style=*M StaticResource ZoomOutAppBarButtonStyle J" 
Click*"OnZoomOutAppBarButtonClick" /> 



</AppBar> 

</Page.BottomAppBar> 

</Page> 

可以来回传递大量 XML 文件，“手动”使用 Bing Maps SOAP 服务，但更好的方法是 
通过 Visual Studio 生成的代理类来使用 Web 服务。该代理类让 Web 服务可作为一些结构、 
枚举和异步方法调用。为了将代理服务器添加到 RotatingMap 程序，我用鼠标办键点击 
Visual Studio 中解决方案资源管理器的项0名称，并从菜单中选择‘‘添加服务引用”。对 
话框请求地址时，我在 Imagery Service 中粘贴 URL ( A 以下网址可以找到与 Bing 地图相关 
联的其他 ： ■个 Web 服务 URL ， http :// msdn . microsoft . com / en - us / library / cc 966738. aspx >。 我将 
其命名为 ImageryService . 也就是说 ， Visual Studio 生成 /使用 RotatingMap.ImageryService 
命名空间的代码。 

该服务有两类谙求，分别是 GetMapUriAsync 和 GetlmageryMetadataAsync 。 第 一个消 
求允许获得特定位 W 的静态地图，但我喜欢选择另一个请求，获得 K 载申.个地图图块和拼 
成完幣地图所耑要的信息。 

我们先看包含 MainPage 构造函数的 RotatingMap 代码。代码只保存两个值作为应用设 
W ： 地图样式 ( MapStyle 枚举项，在为 Web 服务所牛.成的代码中，表示道路或鸟瞰视图)和 
粮数缩放级別。 

项 R: RotatingMap I 文件 ： MainPage • xaml .cs 《片 段〉 

public sealed partial class MainPage : Page 


// Saved as application settings 
MapStyle mapStyle = MapStyle.Aerial; 
int zoomLevel = 12; 

public MainPage() 

( 

this.InitializeComponent(); 

DisplayProperties.AutoRotationPreferences * DisplayProperties.NativeOrientation; 
Loaded += OnMainPageLoaded; 
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SizeChanged += OnMain PagesizeChanged; 


// Get application settings (and later save them) 

IPropertySet propertySet = ApplicationData.Current.LocalSettings.Values; 

if (propertySet.ContainsKey("ZoomLevel")) 

zoomLevel = <int>propertySet["ZoomLevel "】； 

if (propertySet.ContainsKey("MapStyle")) 

mapStyle = (MapStyle)(int)propertySet("MapStyle"J; 

Application.Current.Suspending += (sender, args)=> 

{ 

propertySet["ZoomLevel"] = zoomLevel; 
propertySet["MapStyle"1 = (int)mapStyle; 


在 Loaded 处理程序访问 Web 服务。两个调用必须 进行： 一个获得道路视图的地图元 
数据，另一个用于鸟瞰阁。信息会保存在名为 ViewParams 局部类的两个实例中。元数据最 
屯要的部分是下载中.个地图图块的 URI 模板。 ViewParams 类也有最小和最大缩放级别宁- 
段，缩放比例范围为1 一21，假设上限为21,以下是代码的其他部分。 

项目 ： RotatingMap | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


// Storage of parameters for two views 
class ViewParams 
( 

public string UriTemplate; 
public int MinimumLevel; 
public int MaximumLevel; 

) 

ViewParams aerialParams; 

ViewParams roadParams; 

Geolocator geolocator = new Geolocator(); 

Inclinometer inclinometer = Inclinometer.GetDefault(); 


async void OnMainPageLoaded(object sender, RoutedEventArgs args) 

{ 

// Initialize the Bing Maps imagery service 
ImageryServiceClient imageryServiceClient = 



// Make two requests for road and aerial views 
ImageryMetadataRequest request = new ImageryMetadataRequest 
{ 

Credentials = new Credentials 


ApplicationId = "put your own credentials string here" 

h 

Style = MapStyle.Road 


Task<ImageryMetadataResponse> roadStyleTask = 

imageryServiceClient.GecImageryMetadataAsync(request); 


request = new ImageryMetadataRequest 




Style = MapStyle.Aerial 




UriTemplate = uri. 



两个异步调用需要获得两个视图的元数据，但两个调用并不彼此依赖，因此讨以同时 
运行。这似乎是 Task . WaitAll 方法的完美应用，该方法会一直等待，直到多个任务项目都 
完成。 

两个 Web 服务调用成功完成后，扁动 Geolocator 和 Inclinometer 。 Inclinometer 仅用于 
获取偏航值，该值可用于旋转地图和旋转指示北方的箭头。 
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1 inometerReadingChanged 


t this.Dispatcher.RunAsync(CoreDispatcherPriority. 
SetRotation(args.Reading); 


SetRotation(InclinometerReading inclinometerReading) 
if (inclinometerReading == null) 




Loaded 处理程序完成后，程序会有两个 UR 1 模板，可以用来下载中.独地图图块。形成 
必应地图的图块是大小力256像# 的正 方形位图。每个图块与特定经度、纬度及缩放级别 
相关联，并且包含一部分通过墨卡托投影的扁平世界的图片。 

在1级中，整个地球，或者说，地球上纬度位于 +85.08 度和 -85.05 度之间的那部分， 
由四个图块覆盖(见下图)。 


二3 

mi^rOu n* 


下 HU ' 要讨论图块中的这些数字。图块是256 像累的 正方形，因此赤道上的毎个像素大 
约覆盖49英里。 

在2级中，有16个图块覆盖地球(见下 图)。 
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这些图块也是256像素的正方形，因此赤道上的每个像素约为24英 IR 。 

1级中每个图块的覆盖面积等于2级中4个图块的覆盖面积，以此 类推： 3级有64个 
图块，4级有256个图块，并一直上升到21级，（原则上)覆盖地球需要超过4万亿个图块， 
毎像素3英寸的赤道上有2百万水平和2百万垂直的分辨率。 

如何用一致方式组织这么多图块？注意，为了使通过 Web 服务最有效地提供这些阁块， 
牵涉到三个维度(经度、纬度和缩放级别)，而覆盖相同区域的图块在服务器上临近存储。 

显然，可以采用巧妙的编号方案 quadkey 。 每个图块都有一个唯一的 quadkey 。 从 Bing 
\1叩 8 \¥比服务获得的1^1模板包含一个占位符“4仙(11«^}”，可以引用实际图块代替。 
两个图表示在左上角特定图块的 quadkeys 。 前导零很重要！ Quadkey 中的数？■•数最等7•缩 
放级别。21级中的的图块均标识为21位 quadkeys 。 

在 quadkey 的数字总是0、1、2或3,表明 quadkeys 实际上是基4数字。在二进制中， 
数字0、1、2和3为00、01、10和丨1。第一位是垂直坐标，第二位是地平來标。因此， 
位会对应于交错的经纬度。 

正如你所见，1级中的毎个图块相当于2级的4个图块，这样就吋以把图块认为具有 
父子关系。子图块的 quadkey 总是以与其父开始的相冋数7•作为开头，但会增加一个数字， 
取决于相对于其父的位置。可以直接从子 quadkey 截掉最后一位数字而获得父 quadkey 

要使用 Bing Maps Web 服务，需要根据经纬度推导出 quadkey 。以 K 
GetLongitudeAndLatitude 方法的代码 M 示了第…步。为/把来自 Geolocator 的经讳度转换 
成相对 double 值，范围从0到1,然后再转换为整数值。 

项 FI: RotatingMap I 文件： MainPage.xaml.cs ( 片段） 

public sealed partial class MainPage : Page 


const int BITRES = 29; 



async void OnGeolocatorPositionChanged(Geolocator sender, PositionChangedEventArgs args) 
( 

await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> 

1 

GetLongitudeAndLa titude(args.Position.Coordinate); 
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RefreshDisplay 


void GetLongitudeAndLatitude(Geocoordinate geoCoordinate) 
{ 

locationDisplay.Visibility * Visibility.Visible; 


II Calculate integer longitude and latitude 

double relativeLongitude = (180 + geoCoordinate.Longitude) / 360; 
integerLongitude = (int)(relativeLongitude * (1 « BITRES)); 



double relativeLatitude = 0.5 - Math.Log( (1 + sinTern) / (1 - sinTerm)) / (4 * Math.PI); 
integerLatitude = (int)(relativeLatitude * (1 « BITRES)); 



BITRES 值为 29, 是 21 级 quadkey 中的 21 位数字，加上图块像素尺寸的8位，也就 
是说，这些整数值识别了一个经度和一个纬度，精确到 S 高缩放等级图块上最接近的像累、 
integerLongitude 的 U •算并+屯要，但 integerLatitude 更复杂，因为离赤道越远，堪卡托地 
图投影就越会压缩纬度。 

例如： 纽约市中央公园的中心，经度为 -73.965368, 纬度为 40.783271 。相对的 double 
值(只有若干小数位>为 0.29454 和0.37572。29位的整数值如卜 (以 二进制表示，4位一组， 
便 P 阅 读)： 

0 1001 0110 1100 1110 0000 1000 0000 

0 1100 0000 0101 1110 1011 0000 0000 


假设你想要该经度和纬度在12级缩放的图块。你需要粮数经度和纬度的前12位(注意， 

所得数字分组方式略有不 同)： 

0100 1011 0110 
0110 0000 0010 

有两个二进制数，但要形成 quadkey , 需要将其组合成基4数字。没有经过实际位循环 
的代码，不能这样做，但为了便于说明，可以直接把纬度上的所有位增加一倍，如果基4 
的值，则进行 相加： 



这就是在从 Web 服务所得 URI 模板中需要替换为 “{quadkey }” 占位符的 quadkey 。 所得 
URI 引用一个256像素的正方形位图。 

下面是 RotatingMap 中的例程， RotatingMap 从截断的整数经度和讳度构建 quadkey 。 
为淸楚起见，该逻辑被分离，首先显示一个长整数推导，再 显示字 符串。 

项月 ： RotatingMap | 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


StringBuilder strBuilder = new StringBuilder(); 



long quadkey = 0; 








if ((longitude & 
quadkey |= 1 



strBuilder.Clear(); 

for (int i = 0 ; i < level; i++) 

( 

strBuilder.Insert(0, (quadkey & 3).ToStringO); 
quadkey »= 2; 



该 quadkey 引用包含所需经纬度的图块，但精确经纬度的位置实际 h 位于图块内某处。 
通过所需 quadkey 位数之后的整数经纬度的下一个8位，可以确定图块内的像素位置。 

现在我们回到主页。整页必须用256个像素的正方形图块覆盖，图块矩阵可旋转.并 
R 用户当前 位置被 定位在屏幕中心的中心图块某处，因此， SizeChanged 处理程序决定需 
要多少图块，需要创建多少 Image 元索。名为 sqrtNumTiles 的字段指“图块数 S 的平方根。” 
对于 1366 X 768 像素的 S 示屏，值为9。图块(和 Image 元素)的总数是其平方，或81。 

项目 ： RotatingMap | 文件 ： Main Page, xaml.cs (M'S) 
public sealed partial class MainPage : Page 
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RefreshDisplay 方法执行真正的 J ： 作。 RefreshDisplay 循环所有 Image 元素，并给每个 
Image 确定 quadkey (以及 URJ )。 

项目 ： RotatingMap I 文件： MainPage.xaml.cs ( 只段 > 
public sealed partial class MainPage : Page 


void RefreshDisplay() 

{ 

if (roadParams = null I I aerialParams = null) 
return; 

if (integerLongitude = - -1 I I integerLatitude = -1) 
return; 

// Get coordinates and pixel offsets, based on current zoom level 
int croppedLongitude = integerLongitude » BITRES - zoomLevel; 
int croppedLatitude * integerLatitude » BITRES - zoomLevel; 
int xPixelOffset - (integerLongitude » BITRES - zoomLevel - 8) % 256; 
int yPixelOffset - (integerLatitude » BITRES - zoomLevel - 8) % 256; 

// Prepare for the loop 

string uriTemplate = (mapStyle == MapStyle.Road ? roadParams : aerialParams). 

UriTemplate; 
int index = 0; 

int maxValue ■ (1 « zoomLevel) - 1; 

// Loop through the array of Image elements 

for (int row = -sqrtNumTiles / 2; row <= sqrtNumTiles / 2; row++) 

for (int col = -sqrtNumTiles / 2; col <= sqrtNumTiles / 2; col++) 

{ 

// Get the Image and BitmapImage 

Image image = imageCanvas.Children 【 index 】 as Image; 

Bitmaplmage bitmap = image.Source as Bitmaplmage; 
index++; 


if 


(croppedLongit ： 
croppedLorv 
croppedLatitude 
croppedLatitude 



col < 0 II 
col > maxValue 
< 0 || 

> maxValue) 


bitmap.L 


null; 


else 


// Calculate a quadkey and set URI to bitmap 
int longitude - croppedLongitude + col; 
int latitude = croppedLatitude + row; 

string strQuadkey = ToQuadKey(longitude, latitude, zoomLevel); 
string uri = uriTemplate• Replace <•’{quadkey}’• ， strQuadkey); 
bitmap.UriSource = new Uri(uri); 


// Position the Image element 

Canvas.SetLeft(image, col * 256 - xPixelOffset); 
Canvas.SetTop(image, row * 256 - yPixelOffset); 


剩 卜的 部分 K 牵涉到应用栏按钮。放大/缩小按钮基 P 当前选择视图的最小/最大缩放级 
别而仔细设置圮用和禁用，尽管(正如我己经讲过的)程序的其他部分显然相当肯定 M 大缩 
放等级为21» 

项目 ： RotatingMap I 文件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


void OnStreetViewAppBarButtonChecked(object sender, RoutedEventArgs args) 

{ 

ToggleButton btn ■ sender as ToggleButton; 

ViewParams viewParams = null; 

if (btn.IsChecked.Value) 

i 

mapStyle = MapStyle.Road; 
viewParams = roadParams; 

} 

else 

( 

mapStyle = MapStyle.Aerial; 
viewParams = aerialParams; 



RefreshDisplay(); 
RefreshButtons(); 


void RefreshButtons() 

( 

ViewParams viewParams = 

streetViewAppBarButton.IsChecked.Value ? roadParams : aerialParams; 
zoomlnAppBarButton. IsEnabled = zoomLevel < viewParams.MaxiitmmLevel; 
zoomOutAppBarButton.IsEnabled = zoomLevel > viewParams.MinimumLevel; 


我们还不太习惯肴到已旋转地图的熟悉区域，因此曼哈顿岛在该视图中看上去有点怪 
(见下图)。 







但如果你站在一 个陌牛 地方，想用平板电脑找到你在哪里，根据现实旋转地图就非常 
有用。也许有一天， M 示城市和街道的标签也可以旋转。 
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本章的内容充满争议。争议主题是在 ti •算领域未来+确定的输入设备，争论双方都有 
强烈的热情。2010年，史蒂大•乔布斯讨论了其他平板电脑和 iPad 竞争的 MJ •能性，并宣称 
“如果你看到了触控笔， 审情就 搞砸了。” （1) 

然而，试过在触摸屏 t 使用基于传统鼠标的应用的人当然不同意他的观点。手写笔+ 
如手指方便.也不如多个手指那么万能，但它像鼠标一样精确，而且通常比手指吏适合从 
菜单中选中条 U 、 选择以及删除输入。我在木书中大部分时候使用的7星 700 T 有一支触控 
笔，我认为，如果在没有鼠标的机器 I :使用 Visual Studio , 触控笔则是必须的。 

因此，我曾万分焦急地等待第一款 Surface 设备的面世。会包含手写笔吗？我甚至认为 
有没有包含决定了本书是否包含有关触控笔的章节！ 

报据史蒂夫 • 乔布斯的标准， Surface 当然没有“搞砸”。第一款 Surface 电脑不包括 
触控笔。我很失望，但无论如何，我还是选抒在本书中包含本章节。 

我个人更喜欢用触控笔-词来指这些输入设备，但从木章这里术语开始将与 Windows 
Runtime 编程接口保持一致，在接口中称之为“手写笔”。而手写笔输入和经渲染的图形 
输出称为‘‘墨迹”。 

读过第13章，你知道了如何处理和渲染手写笔输入。然而，处理手写笔时， 
Windows . Ul . lnput . lnking 命名空间会提供额外的以卜_功能： 

• 在涂竭之外的擦除和选样模式 

. 为了 史平消 过渡，把折线输入转换为 W 塞尔曲线 

• 手写识别 

• 保存堪迹到文件，并从文件中加战堪迹 

只不过，本章不探讨手写识别。 

有趣的是，这些功能实际 h 并不需耍手写笔！理论 k 讲，可以通过触換或鼠标输入做 
本章中的任何事。然而，触投或鼠标输入在手写方面很笨拙，因为用手指_出的文木往往 
太大.用鼠标绘制的文本往往又太抖。用笔就刚刚好。人们预计大小和形状 适合书 写的设 
备备至少存在了两千年。 

之前我引用《纽约时报》的文章，内容都是与电容笔相关。电容笔设计用来补充手指 
在电容触屏 I .的 操作。除了精度和叶操作件之外，与手指相比较，电容笔并没有提供仟何 
真正的优势。 

有史多功能的是电子笔，有时称为‘‘数字化仪”或“数字触控笔”，但这些笔要求屏 
嵇能响应这种笔输入。本 ts 中使用的二星 700 T 平板就是这种情况。这种笔有一个小尖头(直 


① David Pogue, “On Touch Screens, Rest Your Finger by Using a Stylus，” http://www.nylimes.com/2012/08/02 / 
technology/personaltech/on-touch-screens-rest-your-finger-by-using-a-stylus -slate-of-the-art.html 。 




径约 1 毫 米)， 而另一端有一个“橡皮擦”，笔管上有一个按键。 PointerPointProperties 类定 
义了两个属性 IsEraser 和 Islnverted . 如果“橡皮擦”而不是笔尖触碰屏嵇，则两个属性均 
为 true 。 这一般用来擦除之前的输入。如果使用了笔尖且按下按键，则 IsBarrelButtonPressed 
屈性为 true 。 这通常用于选择。 

除非专 N 力电磁笔用户编写程序，否则一般都会用软件选项來补充电磁笔的擦除和选 
择功能，但本章为了精简示例项 H , 会跳过该功能。 

19.1 InkManager 集合 

Windows . Ul . Input . Inking 命名空间里有 InkManager 类的 成员。 InkManager 类是应用和 
使用笔相关功能的入口。 

InkManager 实例维护某个特定输入页|酎的所有堪迹。如果程序实现的是便笼本，就像 
本章最后一个程序一样，便笺本上的每个页面有自己的 InkManager . 

InkManager 对象维护 InkStroke 类型对象的 集合。 每个 InkStroke 是一条连续曲线，一 
般都用笔触碰屏幕、移动并抬起而创建的。 InkStroke 和特定 InkDrawingAttributes 对象相关， 
后者的主要 H 的是显示笔画颜色以及笔尖形状和大小，尽管(正如你会看到的 InkManager 
和 InkStroke 并不真的处理这些绘 W 属性。 

毎个 InkStroke 都包含一个 InkStrokeRenderingSegment 对象集合 。 InkStrokeRenderingSegment 
是特定笔压力、倾斜和扭曲的申-条贝塞尔曲线。压力通常用于渲染笔_时计算线的宽度。 
值范围从0到1，就像 PointerPointProperties 的 Pressure 属性一样。支持倾斜和扭曲的笔很 

少见。 

在程序的帮助下， InkManager 吋以积累笔输入并将输入变成贝寒尔曲线，但其自身尤 
法进行渲染。渲染完全是你的责任，一般需要两步操作。 

• 随着用户用笔绘画或书写，用 Polyline 、 Line 或 Path 进行渲染线条。 

• 每个笔 M 完成后，用 W 寒尔曲线取代这些元素。 

你已经看过与 FingerPaint 程序有关的第-步渲染。为了阐明使用 InkManager 的基本知 
识，我专注于第一个示例项目 Simplelnking 中的第 i 步渲染。 Simple 〖 nking 程序非常简单， 
以至于要把笔从屏幕 h 抬起来才能看到实际上画的内容。 

以下为 XAML 文件。注意，我把 Grid 涂成白色，这通常是笔输入的惯例。 

项 H: Simplelnking | 文件： MainPage.xaml( 片段 } 

<Page — > 



</Page> 

在默认情况下，笔输入为黑色。 

我采用了 中个 InkManager 对象。 

项 H: Simplelnking | 义件： MainPage.xaml ( 片段 ) 
public sealed partial class MainPage : Page 


InkManager inkManager = new InkManager(); 
bool hasPen; 
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public MainPage 0 
( 

this.InitializeComponent(); 

// Check if there’s a pen among the pointer input devices 
foreach (PointerDevice device in PointerDevice.GetPointerDevices()) 
hasPen |= device.PointerDeviceType == PointerDeviceType.Pen; 



构造函数决定机器是否支持手写笔，如果支持， hasPen 字段设背为 tme 。 对该项 H ， 
我决定忽略所有支持手写笔的电脑的无笔指针输入，但会接受所有不支持手写笔的电脑的 
指针输入。这样一来，就允许程序用丁 • Microsoft Surface 。 

InkManager 定义以卜三个方法，■以结合 Pointer 事件来使用，它们允许 InlcManager 
对象积累指针 输入： 

• ProcessPointerDown ,⑷从 PointerPressed 事件处理程序进行调用 

• ProcessPointerUpdate » 从 PointerMoved 泰件处 理程序进行多次调用 

• ProcessPointerUp ， uj * 从 PointerReleased 事件处理程序进行凋用 

每个方法的参数是均为 PointerPoint 对象， K )* 以通过调用 GetCurrentPoint 或 
GeUntermediatePoints 从 PointerRoutedEventArgs 获得。 PointerPoint 对象不仅包括指针位 
?¥，而且包括指针 1 D (允许 InkManager 跟踪多个指针)和 PointerPointProperties ,包括力 
和倾斜。 

以卜为 Simplelnking 中的 OnPointerPressed 覆写。 

项 Simplelnking | 义件 r MainPage.xaml.es(>V©) 

protected override void OnPointerPressed(PointerRoutedEventArgs args) 

if (args.Pointer.PointerDeviceType == PointerDeviceType.Pen || !hasPen) 

( 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 
inkManager.ProcessPointerDown(pointerPoint); 

} 

base.OnPointerPressed(args); 

) 

if 语句检 ft Pen 的设备类纲，但如果 汁算机 +支持手写笔也允许其他指针设备。如果 
想支持所有指针输入设备，则叫以删除整个 if 语句。在任何情况 F , 只要把 PointerPoint 
对象传送给 InkManager 的 ProcessPointerDown 方法。 处理 OnPointerMoved 稍微复杂 一点。 

项 R: Simplelnking I 文件： MainPage.xam! .cs ( 片段） 

protected override void OnPointerMoved(PointerRoutedEventArgs args) 

if ((args.Pointer.PointerDeviceType == PointerDeviceType.Pen || !hasPen) && 
args.Pointer.IsInContact) 

( 

IEnumerable<PointerPoint> points = args.GetlnterroediatePoints(this).Reverse(); 


foreach (PointerPoint point in points) 

inkManager.ProcessPointerUpdate(point); 

) 

base.OnPointerMoved(args); 


调用 ProcessPointerUpdate 允许 InkManager 积累所有墨迹笔 Iffli 片段。为 ] ■尽可能保真 
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笔输入，代码使用了 GetlntermediatePoinU ,而没有使用 GetCurrentPoint , 并采用 LINQ 
Reverse 操作符进行逆转。 

注意， OnPointerMoved 的 if 语句包括对 IsInContact 属性的检杳。你应该记得，在屏幕 
附近实际触碰到屏筋之前，手写笔就开始生成 OnPointerMoved 亊件。如果 if iS •句+检迕 
IsInContact . 则调用 InkManager 的 ProcessPointerUpdate . 冉调用 ProcessPointerDown ， 而 

这会引发异常。 

到0前为止，程序还没有进行任何绘 W 。 任何合理的程序都应该能够顺利绘_。程序 
为 OnPointerReleased 方法保存所有绘画，我们先来看看 InkManager 的开销。 

项目 ： Simplelnking I 文件： MainPage• xaml.cs UV 段） 

protected override void OnPointerReleased(PointerRoutedEventArgs args> 



在渲染新的 InkStroke 对象之前，志要先了解 InkDrawingAttributeso 

19.2 墨迹绘画属性 


尽管 InkManager G 身并不进行渲染，但它维护着与渲染堪迹有关的属性信息。这些信 
息封装在 InkDrawingAttributes 类中.该类具有以 K 属性和默认值。 


属性 

值 

Color 

Black (OxFrOOOOOO) 

PenTip 

Circle 

Size 

(2,2) 

FitToCurve 

true 

IgnorePressure 

false 


如果白己要创迷新的 InkDrawingAttributes 实例，就 u ] ■以用这些 InkManager 内部为 
InkDrawingAttributes 创建并保留的默认值。 

这些属性确实有助于需要渲染墨迹笔 Pi 的应用程序!它们不会影响 InkManager 的操作， 
因为 InkManager 身+进行湞染。 

PenTip 的唯一另一个选项是 Rectangle , 本例中 ( Size 类型 的) Size 厲性描述笔尖大小。 
对 r •默认 Circle 笔尖， " 了以使用 Size 值的 Width 属性来决定渲染线条的宽度。 

FitToCurve 属性表明堪迹是否应该渲染为 W 塞尔曲线，而不管如何设置 ， InkManager 
都会把指针输入转换为贝塞尔 rth 线， IgnorePressure 属性表明渲染<1迹无耑考虑压力信息， 
但无论怎样设 S , InkManager 部会包括压力信息。 
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InkManager 通过这些默认属性创建 InkDrawingAtlributes 对象并在内部进行维护。然而， 
程序不能访问该对象。如果想给 InkManager 对象设置不同的默认属性，必须采用如下 方式： 

InkDrawingAttributes inkDrawingAttributes * new InkDrawingAttributes(); 
inkDrawingAttributes.Color = Colors.Red; 

InkDrawingAttributes.Size - new Size(6, 6); 

inkManager.SetDefaultDrawingAttributes(inkprawingAttributes); 

创建新的 InkDrawingAttributes 对象并传递给 InkManager . +要假设程序和 InkManager 
共享该对象，应用对对象进行的任何更改都反映到 InkManagei ■维护的内部对象上。如果进 
一步更改 InkDrawingAttributes ， 必须再次调用 SetDefaultDrawingAttributes 方法，才能使史 

改生效。 

正如你看到的，使用 InkManager 的程序通过调用 InkManager 方法 ProcessPointerDown 、 
ProcessPointerUpdate (多次)和 ProcessPointerUp , 来处理正常序列的 PointerPressed 、多个 
PointerMoved 和 PointerReleased 事件。 该序列调用完成后 ， InkManager 创建新的 InkStroke 

并将其添加到集合中。 

InkStroke 对象代表从指针触碰屏幕幵始到指针抬起为止的连续墨迹笔画。 InkStmke 有 
InkDrawingAttributes 类划的 DrawingAttributes 属性 ， DrawingAttributes 厲性 rtl InkManager 
基于其内部默认 InkDrawingAttributes 对象创建。 

例如，假设要通过调用 ProcessPointerDown 、 ProcessPointerUpdate (多次）和 
ProcessPointerUp 来创建新的 InkManager 并处 PR 指针输入。得到的 InkStroke 对象有一个 
InkDrawingAttributes 对象，表示黑色笔，大小为（2, 2) 。现在，程序创建新的 
InkDrawingAttributes 对象、设賈两个属性并通过之前展示过的代码调用 
SetDefaultDrawingAttributes 。 ProcessPointerDown、ProcessPointerUpdate 和 ProcessPointerUp 
的 F — 个序列凋用产生第二个 InkStroke 对象，但其 DrawingAttributes 厲性表示红色笔，大 
小为(6,6)。 

但这并不是一 成+ 变的。■以创建新的 InkDrawingAttributes 对象， 设賈 给单个 
InkStroke 对象，也以对引用自 InkStroke 对象 DrawingAttributes 属性的现有 
InkDrawingAttributes 对象，改变其任何厲性值。 

调用 ProcessPointerUp 方法聒， InkManager 把内部积累的新笔_所有点转换为一条或 
多条贝塞尔曲线，构成新的 InkStroke 对象。通过 GetStrokes 方法，这个新的 InkStroke 添 
加到内部集合。 

笔画完成后， Simplehiking 程序渲染每个笔_，因此只关注对集合 m 最近的 InkStroke , 
可以通过如下方法 获得： 

IReadOnlyList<InkStroke> inkStrokes = inkManager.GetStrokes(); 

InkStroke inkStroke = inkStrokesIinkStrokes.Count - 1]; 

该 InkStroke 有 DrawingAttributes 厲性和 InkStrokeRenderingSegment 对象集合，代表一 
系列相连的 W 寒尔曲线。通过调用 GetRenderingSegments , 程序吋以获得区段集合。 

待个 InkStrokeRenderingSegment 包含二 •个 Point 类別厲性： 

• BezierControlPoint 1 


• BezierControlPoint 2 
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• Position 

集合中的第一个 InkStrokeRenderingSegment 对象中，三个点都相同。这是完整曲线的 
第一个点。每个后续 InkStrokeRenderingSegment 都从该点继续，同时有两个控制点和一个 
结束点。 

此外，每个 InkStrokeRenderingSegment 还包含四个 float 类型属性： 

• Pressure 

• TiltX 

• TiltY 

• Twist 

这显然适用于我一直在用的更漂亮的手写笔系统！我在三星700 T 上使用手写笔时， 
看到 Pressure 值从0到丨，但其他三个属性的默认值为0.5。理论上， TiltX 和 TiltY 属性表 
明笔杆相对于屏幕如何倾斜， Twist 属性仅适用 T 矩形笔尖，表明矩形笔尖相对于屏幕轴如 
何旋转。 

本章一直都会考虑 Pressure 值。正如你所 id 得的，在 FingerPaint 程序中，如果忽略压 
力， Polyline 就适合渲染连接曲线，但考虑压力就耑要中个 Line 元素或中•个 Path 元素，而 
每个 Line 元素都可能有不同的线宽度模拟+同宽度的一条直线。 

Simplelnking 中的代码把每个 InkStrokeRenderingSegment 第一个 除外) 绘制成带成 
PathGeometry 的 Path 元矣，并包含带单个 BezierSegment 的单个 PathFigure。Path 的 Stroke 
属性为 SolidColorBrush ，创建 InkStroke 的 DrawingAttributes 属性的 Color 厲性。 
StrokeThickness M 性是 InkStroke 的 DrawingAttributes 的 Size 属性及特定 
InkStrokeRenderingSegment 的 Pressure 属性的产物。 

: Simplelnking I MainPage.xaml.es(IVS) 

protected override void OnPointerReleased(PointerRoutedEvenCArgs args) 



// Create a BezierSegment from the points 
BezierSegment bezierSegment - new BezierSegment 


inkSegment.BezierControlPointl, 
inkSegment.BezierControlPoint2, 
inkSegment.Position 


II Create a PathFigure that begins at the preceding Position 
PathFigure pathFigure = new PathFigure 
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StartPoint = inkSegments[i - 1 】 . Position, 
IsClosed = false, 

IsFilled - false 

)； 

pathFigure.Segments.Add(bezierSegment); 

// Create a PathGeometry with that PathFigure 
PathGeometry pathGeometry - new PathGeometry(); 
pathGeometry.Figures.Add(pathFigure); 


// Create a Path with that PathGeometry 
Path path = new Path 
( 

Stroke = brush, 

StrokeThickness - inkStroke.DrawingAttributes.Size.Width * 
inkSegment.Pressure, 

StrokeStartLineCap * PenLineCap.Round, 

StrokeEndLineCap = PenLineCap.Round, 

Data = pathGeometry 


// Add it to the Grid 

contentGrid.Children.Add(path); 


for 循环从 InkStrokeRenderingSegment 对象的集合中的 1 开始，因为第一个对象仅仅表 
4;•起点，而每个后续 InkStrokeRenderingSegment 均为中•一贝樂尔曲线。在每个 PathGeometry 
中 ， PathFigure 屯的 StartPoint 均为之前 InkStrokeRenderingSegment 的 Position 厲性。 

尽管在抬起笔之前无法明白我_的是什么，我还是画出了如 卜图 所水的消息。 



InkManager 把折线转换为一系列 W 塞尔曲线，不仅是为了渲染一条更平滑的线，而 R 
是为了减少数据数慑。本特定例子包括卜表所示的五个 InkStroke 对象： 两个用于 H ， -个 
用 ； P Hello 的剩余部分，一个用于 P , 最后一个用 T Pen 的剩余部分。你吋能很想知道指定 
InkManager 原始折线片段的数最以及其所创建的 InkStrokeRenderingSegment 数贵。 




即使考虑到每个折线片段是一个点、每个贝塞尔曲线片段(第一段 之后) 是三个点，仍 
然会有效减少数 据量。 

如果想忽略 ffi 力， oj ■以为幣个 InkStroke 采用 争个 Path 元素，并通过 PolyBezierSegment 
中.个实例来创建几何图形，以通过来 InkStrokeRenderingSegment 的每个点填充 Points 集 
合，但第一个点仅用于设置 PathFigure 的 StartPoint 属性。这种替代方法如下所示。 

// Render the most recent InkStroke 

IReadOnlyList<InkStroke> inkStrokes = inkManager.GetStrokes(>; 

InkStroke inkStroke = inkStrokes[inkStrokes.Count - 1]; 

// Create a PolyBezierSegment for all the segments in that stroke 

IReadOnlyList<InkStrokeRenderingSegment> inkSegments = inkStroke.GetRenderingSegments(); 
PolyBezierSegment PolyBezierSegment 二 new PolyBezierSegment(); 

for (int i = 1; i < inkSegments.Count; i++) 

InkStrokeRenderingSegment inkSegment = inkSegments[i]; 

PolyBezierSegment.Points.Add(inkSegment.BezierControlPointl); 

PolyBezierSegment.Points.Add(inkSegment.BezierControlPoint2); 

PolyBezierSegment.Points.Add(inkSegment.Position); 


PathFigure pathFigure 

{ 

StartPoint = inks 
IsClosed = false. 


begins at first 
PathFigure 

匕 s[ 0 】 .Position, 


pathFigure.Segments.Add(PolyBezierSegment); 

// Create a PathGeometry with that PathFigure 
PathGeometry pathGeometry = new PathGeometry(); 
pathGeometry.Figures.Add(pathFigure); 


"Create a Path 
Path path = new 


PathGeometry 


Stroke = new SolidColorBrush{inkStroke.DrawingAttributes.Color), 
StrokeThickness = inkStroke.DrawingAttributes.Size.Width, 
StrokeStartLineCap = PenLineCap.Round, 

StrokeEndLineCap = PenLineCap.Round, 

Data = pathGeometry 


Grid 

dren.Add(path); 


U 然， InkManager 不会试图捕捉指针。这是你自己必须要做的車。然而，如果积累指 
针输入抬起笔的时候，一旦笔飘出控制范围， InkManager 就会优雅地进行恢复。如果没有 
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全部调用 ProcessPointerUp» 调用 ProcessPointerDown 就小会抛出异常。 

19.3 擦除和其他增强功能 

Simplelnking 程序有一项明显的增强功能，即在实际用笔绘画的同时渲染折线。（这实 
际 L 是最低标准，而不是增强！ >如果忽略笔的压力，折线还算是一个实际的 Polyline 元素， 
如果不忽略，则折线是 Line 或 Path 元素的集合。但逻辑一旦实现，可以 选杵： 笔画完成的 
时候，可以用贝塞尔曲线替换折线或者在屏牯I:保留折线。 

如果用 Simplelnking 程序尝试不同笔压力，则可能倾向于在屏幕上保留折线。如果仔 
细观察经渲染的贝塞尔曲线.你可能不喜欢看到的东两，我也不怪你。有时候容易看到一 
条 W 寒尔曲线结束的地方以及下一条开始的地方，因为线的宽度+连续。在笔画开始和结 
束的地方特别明敁。（在之前的屏幕截图中，看看单同 “Pen” 两个笔画结束的地方。） 

一旦开始思考这个问题，这些贝塞尔曲线就不应该有统一的宽度。例如，如果一个笔 
画由四个 InkStrokeRenderingSegment 对象组成，压力值为0.25、0.5、0.6、0.4,则第一条 
贝塞尔曲线应该有一个吋变宽度.开始的宽度基于 0.25 并增加到基于 0.5 的宽度，第:条 
W 塞尔曲线的宽度应该基 J •从 0.5 到 0.6 堉加，最后一条 W 塞尔曲线的宽度应该基丁 • 0.6 到 
0.4 减少。 

也就是说.不能只从 InkStrokeRenderingSegment 对象 来设霄 BezierSegment 属性 。你 
"J ■能想用贝寒尔曲线的点和压力值合成笔 Pi 的 outline , 然后通过 Path 填补，就像我在 
FingerPaint 5 甩处理线条那但很显然，这项 I:作对贝塞尔曲线比直线在算法上复杂得多。 

还有一个问题。 Simplelnking 程序在每一个新笔画完成时都进行渲染并把 Path 元素添 
加到名为 contentGrid 的 Grid 里。如果在I画折线的同时创建折线，并且用 Beziei •曲线取代， 
则需要从 Grid 中刪除早期元岽。如果擦除，在某些时候则可能需要从 Grid 中删除一些贝 
塞尔曲线，但你小确定哪些需要挑出来，除非用某种方法对其进行标记。 

这两个问题暗示非常容易在 OnPointerReleased 期间淸理 Grid 的 Children 集合以及从一 
开始就渲染内容。如果擦除某些内容，通常就耑要这么做，但不需要一直都这么做，尤其 
是定义中.独的 Grid 元素用于渲染初始线条和最终的贝塞尔曲线的。 

InkManager 有 InkManipulationMode 类啦的 Mode 属性.有以下个枚乎项： 

• Inking 

• Erasing 

• Selecting 

M 然，默认值为 Inking。 为了能够擦除，可以在 OnPointerPressed 期间把属性设 S 为 
OnPointerPressed . 然后正常处理，但不做任何 渲染。 在随 f 调用 InkManager 的 
ProcessPointerUpdate 方法中，只要笔的移动跨越了现有笔画， InkManager 就从其集合中移 
除该笔 M。 

虽然 uj ■以在 OnPointerReleased 期间取新渲染所荇剩余的 InkStroke 对象，但在 
OnPointerMoved 期间笔 fflj 实际就已经删除，因此不需要等待 OnPointerReleased 向用户反馈 
笔 M 删除。 

新项 tl 为 InkAndEraseo 为了简化移除在绘制新笔 Pi 过程中所创建的初始 Line 元素， 
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XAML 文件包含两个同级的 Grid 元素。 

项目 ： InkAndErase | 文件： MainPage.xaml ( 片段） 

<Page ... > 

<Grid Background- M White"> 

<Grid Name="contentGrid" /> 

〈Grid Name-"newLineGrid" /> 

</Grid> 

</Page> 

contentGrid 用于通过贝塞尔曲线渲染的所有笔画， newLineGrid 用于在笔画过程中所创 
建的 Line 元素.这种分离容易通过清理 newLineGrid 的 Children 集合来去掉 Line 部分。 

代码隐藏文件创建 InkDrawingAttributes 对象，将它设置为非默认值(为了 不同） 的 
InkManager . 但把 InkDrawingAttributes 对象作为字段进行维护，有助于 OnPointerMoved 
覆写中线条绘 W 代码。因为程序自身执行一些指针输入处理，因此会定义 Dictionary 用于 
存储每个指针的相关信息。 

项 R: InkAndErase | 文件： MainPage.xaml.cs < 片段） 
public sealed partial class MainPage : Page 


InkManager inkManager = new InkManager(); 
InkDrawingAttributes inkDrawingAttributes 
bool hasPen; 


Dictionary<uint, t 
public MainPage() 


pointerDictionary 


new InkDrawingAttributes(); 


Dictionary<uint, 


this.InitializeComponent(); 

// Check if there#s a pen among the pointer input devices 
foreach (PointerDevice device in PointerDevice.GetPointerDevices 0) 
hasPen 1= device.PointerDeviceType == PointerDeviceType.Pen; 

// Default drawing attributes 

inkDrawingAttributes.Color = Colors.Blue; 

inkDrawingAttributes.Size = new Size(6, 6); 

inkManager.SetDefaultDrawingAttributes(inkDrawingAttributes); 


在 InkAndErase 中，贝塞尔曲线的渲染代码和之前的程序几乎相同，但我将其分离成 
两个方法，以允许整个艰迹集合可以重绘或 uj •用 r 单个 InkStroke 对象的绘制。 


项目 ： InkAndErase | 文件： 
public sealed partial cl 


nPage.xaml.es ( 斤段 } 
MainPage : Page 


RenderAll() 

contentGrid.Children.Clear(); 

foreach (InkStroke inkStroke in inkManager.C 
RenderStroke(inkStroke); 


void RenderStroke(InkStroke inkStroke) 

{ 

Brush brush = new SolidColorBrush(inkStroke.DrawingAttributes.Color); 
IReadOnlyList<InkStrokeRenderingSegment> inkSegments = inkStroke.GetRenderingSegments (); 



StartPoint = inkSegments【i - 1 】 .Position, 
IsClosed ■ false, 

IsFilled = false 

}； 

pathFigure.Segments.Add(bezierSegment); 

PathGeometry pathGeometry ® new PathGeometry(); 
pathGeometry.Figures.Add{pathFigure); 


Path path = new Path 

( 

Stroke = brush, 

StrokeThickness = inkStroke.DrawingAttributes.Size.Width * 

inkSegment.Pressure, 
StrokeStartLineCap = PenLineCap.Round, 

StrokeEndLineCap « PenLineCap.Round, 

Data = pathGeometry 

}； 

contentGrid.Children.Add(path); 


除了与 InkManager 对象交互的代码外， Pointer 事件处理的大部分内容非常类似丁第 
13章的压力敏感 FingerPaint 4 程序。 OnPointerPressed 闱写是程序检查指针输入设备是笔的 
唯-•地方。随的 Pointer 港写通过 pointerDictionary Ml 的指针 ID 键来确定绘 iWi 操作是否正 
在进行中。 

OnPointerPressed 覆写基于 isEraser 属性将 InkManager 进入擦除模式，也就是说，用户 
用笔的橡皮擦端来触碰屏幕。真正的程序 uj ■能有应用栏按钮为没有使用卨档笔的用户把 
InkManager 放入擦除模式。 

项目 ： InkAndErase | 文件： MainPage.xaml.cs ( 片段 } 

protected override void OnPointerPressed(PointerRoutedEventArgs args) 

( 

if (args.Pointer.PointerDeviceType == PointerDeviceType.Pen || !hasPen) 

{ * 

// Get information 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 
uint id = pointerPoint.Pointerld; 

// Initialize for inking or erasing 
if (!pointerPoint.Properties.IsEraser) 

inkManager.Mode = InkManipulationMode.Inking; 


else 






OnPointerPressed 覆写以捕获指针结束。 

OnPointerMoved 重写就像 FingerPaint 4 程序一样创建和谊染 Line 元素，但只是不擦除。 
擦除的时候，检查 ProcessPointerUpdate 的返回值。如果笔画已经从集合中删除，则返冋值 
为非空 Rect 对象，以 显示必 须贯绘的屏幕区域。该方法通过束新渲染所有笔画集合进行响 
应，现在失去了己删除的笔画。 

项目 ： InkAndErase | 义件： MainPage.xaml.cs ( 片 段） 

protected override void OnPointerMoved(PointerRoutedEventArgs args) 



foreach (PointerPoint point in args.GetlntermediatePoints(this).Reverse()) 


dnterPoint to InkManager 
3 inkManager.ProcessPointerUpdate(point); 











base.OnPointerMoved(args); 


注意， Line 元素放入 newLineGrid , 但渲染 W 塞尔曲线笔_涉及 contentGrid 。 

调用 OnPointerReleased 的时候，所有擦除应该都已经完成。然而，仟何墨迹操作都需 
要通过渲染 contentGrid 中的新笔 ffli 并从 newLineGrid 移除初始的 Line 元尜来 完成。 

项 R: InkAndErase I 文件： MainPage.xaml .cs ( 片段） 

protected override void OnPointerReleased(PointerRoutedEventArgs args) 



// Give PointerPoint to InkManager 
inkManager.ProcessPointerUp(pointerPoint); 




程序己经捕获了指针，因此应该有对 PointerCaptureLost 事件的处理程序。程序通过从 
newLineGrid 删除初始线条以及 軍:新 渲染其余一切来处理 PointerCaptureLost 货件。 

项 R: InkAndErase | 文件： MainPage.xaml.cs ( 片段 } 

protected override void OnPointerCaptureLost(PointerRoutedEventArgs args) 

{ 

uint id = args.Pointer.PointerId; 


if (pointerDictionary.ContainsKey(id)) 

( 

pointerDictionary.Remove(id); 
newLineGrid.Children.Clear(); 
RenderAll(); 

) 

base.OnPointerCaptureLost(args); 


19.4 选择笔画 

InkManipulationMode 的第 5 项是 Selecting 。 对丁•电磁笔， 当按下 笔管按键时，你想在 
PointerPressed 事件期间让 InkManager 进入选择模式 。 T -- 个例程序就耍做这些，但真正 
的应用还应该有程序选项，使用户 " J * 以手动让 InkManager 进入选抒模式。 

在选择模式中，传递给 ProcessPoimerUpdate 方法的点被视为定义封闭区域。你吋能® 
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渲染线条，但要用能区分墨迹的方式。该封闭线完成后， ProcessPointerUp 返回非空 Reel 
值，表示所选笔®的边界矩形。如果没有选中笔画，则 Rect 为空。如果选中笔画，则粜合 
中被选中的 InkStroke 对象把其 Selected 属性设靑为 true 。 

在实际使用中，选择使用该封闭线我觉得有点古怪。我通常必须试几次才能生效。 

也可以通过编程来选择笔_ ,即使用 InkManager 的 SelectWithLine 或 
SelectWithPolyLine 方法，手动切换 InkStroke 的 Selected 属性，但我不展示这些方法。这 
些方法允许你实现自己选择的协议，而不依赖于 InkManager , 而此时.在选择操作正在进 
行时，不会调用 InkManager 方法。 

如果用户选抒一个或多个 InkStroke 对象，就用某种方式进行高亮敁示。还需要提供程 
序选项来处理这些选中项目。 InkManager 类自身定义了名为 DeleteSelected 、 
CopySelectedToClipboard 和 MoveSelected 的方法。最后一个方法把笔_从当前位置平移指 
定偏移傲。还可以将笔画从剪贴板粘贴到 InkManager 。 

你 uj •能还想定义应用栏控件来改变所选笔画的颜色或笔画宽度。没有选中笔画时，你 
wj ■能想通过同一应用栏控件来设置默认颜色和笔画宽度。这里用不上 InkManager , 但用户 
界面设汁是用 InkManager 来完成的。 

以下项目名为 InkEraseSelect , 演示了所有三种 模式。 就像 InkAndErase 一样， 
InkEraseSelect 包含两个 Grid 元素用于渲染畢迹和初始线条。 

项 H: InkEraseSelect | 文件： MainPage.xaml (Ji 段） 

<Page ... > 

<Grid Background="White"> 

<Grid Name="contentGrid" /> 

<Grid Name= M newLineGrid" /> 


<AppBar Name»"bottomAppBar" 

Opened*"OnAppBarOpened"> 

<StackPanel Orientation="Horizontal" 

HorizontaiAlignment="Left M > 

<Button Name="copyAppBarButton" 

Style=" (StaticResource CopyAppBarButtonStyle)'' 
Click="OnCopyAppBarButtonClick" /> 


"{StaticResource CutAppBarButtonStyle J” 
•'OnCutAppBarButtonClick- /> 


Style="(StaticResource PasteAppBarButtonStyle}" 
Click= n OnPasteAppBarButtonClick w /> 

Name="deleteAppBarButton" 

Style="{StaticResource DeleteAppBarButtonStyle}" 
Click="On[)eleteAppBarButtonClick" /> 


</AppBar> 

</Page.BottomAppBar> 

</Page> 


XAML 文件还有一组应用程序栏按钮用于标准选项 Copy 、 Cut , Paste 和 Delete 。 
代码隐藏文件和之前的程序一样，只不过定义了用于对所选项 tl 封闭线进行着色的 

Brush 。 




项 H: InkEraseSelect | 文件： MainPage.xaml.cs (片 段） 
public sealed partial class MainPage : Page 

InkManager inkManager = new InkManager(); 

InkDrawingAttributes inkDrawingAttrlbutes = new InkDrawingAttributes(); 
bool hasFen; 

Dictionarycuint, Point> pointerDictionary = new Dictionary<uint, Point>(); 
Brush selectionBrush = new SolidColorBrush(Colors.Red); 

public MainPage 0 

{ 

this.InitializeComponent 0; 

// Check if there’s a pen among the pointer input devices 
foreach (PointerDevice device in PointerDevice.GetPointerDevices()) 
hasPen |= device.PointerDeviceType ■— PointerDeviceType.Pen; 

// Default drawing attributes 
inkDrawingAttributes.Color = Colors.Blue; 
inkDrawingAttributes.Size = new Size(6, 6); 

inkManager.SetDefaultDrawingAttributes(inkDrawingAttributes); 


OnPointerPressed® 写还会检汽笔杆按键。如果按 K 按键，则设背选样模式。在 E 实的 
程序中，你要有选项能够用丁•为没有笔杆按键的设胃选择模式。如果进入选择模式，程序 
就会画一个简中外壳，宽度均匀，因此为此 H 的创建 Polyline, 并将其添加到 newLineGrid。 

项 R: InkEraseSelect I 文件： MainPage.xaml.es ( 片段 > 

protected override void OnPointerPressed(PointerRoutedEventArgs args) 

( 

if (args.Pointer.PointerDeviceType = PointerDeviceType.Pen II !hasPen) 

( 

// Get information 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 
uint id = pointerPoint.PointerId; 

// Initialize for erasing, selecting, or inking 
if (pointerPoint.Properties.IsEraser) 
i 

inkManager.Mode = InkManipulationMode.Erasing; 

J 

else if (pointerPoint.Properties.IsBarrelButtonPressed) 

( 

inkManager.Mode = InkManipulationMode.Selecting; 

// Create Polyline for showing enclosure 
Polyline polyline = new Polyline 
{ 

Stroke « selectionBrush, 

StrokeThickness = 1 

»； 

polyline.Points.Add(pointerPoint.Position); 
newLineGrid.Children.Add(polyline); 

) 

else 

( 

inkManager.Mode = InkManipulationMode.Inking; 


// Give PointerPoint to InkManager 
inkManager.ProcessPointerDown(pointerPoint); 



// Add an entry to the dictionary 



// Capture the pointer 
CapturePointer(args.Pointer); 


base.OnPointerPressed(args); 

» 

在 OnPointerMoved 覆写中，擦除和墨迹模式和之前的程序一样。对 f 选抒模式 ， Polyline 
直接继续第13章中的 FingerPaintl 程序。 

项 InkEraseSelect I 文件： MainPage.xaml.cs( 片段） 

protected override void OnPointerMoved(PointerRoutedEventArgs args) 

// Get information 

PointerPoint pointerPoint = args.GetCurrentPoint(this); 
ni nr \ ri = noi nfprPrti nr . Pni nrprTri: 





II Give PointerPoint to InkManager 

abject obj = inkManager.ProcessPointerUpdate(point); 







=pointl.X, 

=pointl.Y # 

=point2.X, 

=point2.Y, 

〕ke = new SolidColorBrush(inkDrawingAttributes.Colc 








当然， FingerPointl 程序中可能有多个 Polyline 元素和触碰屏幕的多个手指相关，多个 
Polyline 元素存储在字典中。虽然 InkManager 可以处理多个手指，但不能处理多支笔，而 
且由于在本程序中选择只限定用于一支笔，因此不可能存在多个 Polyline 元素。允许包括 
触控输入的替代选扞方式的程序需要处理多个定义的同时选择区域！ 

对于选样模式， OnPointerReleased 覆写删除定义封闭的 Polyline 并调用 RenderAll 。 渣 
染逻辑负责不同渲染所选扦的笔画。 

项 H : InkEraseSelect | 义件： MainPage.xaml.cs ( 片 段） 
public sealed partial class MainPage : Page 


protected override void OnPointerReleased(PointerRoutedEventArgs args) 

( 

// Get information 

PointerPoint pointerPoint * args.GetCurrentPoint(this); 





Give PointerPoint to InkManager 
kManager.ProcessPointerUp(pointerPoint); 


if (inkManager.Mcxie 


InkManipulationMode.Inking) 



newLineGrid.Children.Clear(); 



IReadOn1yList<InkStroke> inkStrokes = inkManager.GetStrokes(); 
InkStroke inkStroke = inkStrokes[inkStrokes.Count - 1 】； 



else if (inkManager.Mode — InkManipulationMode.Selecting) 

{ 

// Get rid of the encircling line 




protected override void OnPointerCaptureLost(PointerRoutedEventArgs args) 




pointerDictionary.Remove(id); 
newLineGrid.Children.Clear(); 
RenderAll(); 


base.OnPointerCaptureLost(args); 



选择封闭完成以及抬起笔之前看的样子，如 K 图所示，此时封闭线从屏箱; h 移除。 
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对于该程序，我把渲染逻辑分成三种方法。 RenderStroke 方法调用 RenderBeziers ， 但 
对 T 所选笔画调用两次，第一次调用采用银色和更宽的笔画。 

项 H: InkEraseSelect | 文件： MainPage.xaml .cs ( 片段 > 
public sealed partial class MainPage : Page 
I 

void RenderAll() 

( 

contentGrid.Children.Clear(); 

foreach (InkStroke inkStroke in inkManager.GetStrokes()) 



public void RenderStroke(InkStroke inkStroke) 

i 

Color color = inkStroke.DrawingAttributes.Color; 
double penSize = inkStroke.DrawingAttributes.Si2e.Width; 

if (inkStroke.Selected) 

RenderBeziers(contentGrid, inkStroke, Colors.Silver, penSize + 24); 
RenderBeziers(contentGrid, inkStroke, color, penSize); 

> 

static void RenderBeziers(Panel panel, InkStroke inkStroke, Color color, double penSize) 

( 

Brush brush = new SolidColorBrush(color); 

IReadOnlyList<InkStrokeRenderingSegment> inkSegments = inkStroke.GetRenderingSegments (); 

for (int i = 1; i < inkSegments.Count; i++) 

{ 

InkStrokeRenderingSegment inkSegment = inkSegments[ij; 

BezierSegment bezierSegment = new BezierSegment 

{ 

Pointl ■ inkSegment.BezierControlPointl, 

Point2 = inkSegment.BezierControlPoint2, 

Point3 - inkSegment.Position 


)； 
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PathFigure pathFigure = new PathFigure 



pathFigure.Segments.Add(bezierSegment); 


PathGeometry pathGeometry = new PathGeomet 
pathGeometry.Figures.Add(pathFigure); 


Path path = new Path 



StrokeStartLineCap = PenLineCap.Round, 
StrokeEndLineCap = PenLineCap.Round, 
Data - pathGeometry 


panel.Children.Add(path); 



我之所以把 RenderBeziers 设買为静态，只是想准确演示该方法需要什么参数来渲染中. 
个笔画。 

通过这种方法来识别的所选笔画，如下图所示。 



这当然是显示所选笔画的一种方法，但也吋以考虑其他方法。 

如果打开应用栏， Opened 处理程序会启用或禁用四个按钮。其中三个按钮的启用基丁- 
InkManager 中所选笔画的出现 ： Paste 按钮的启用基 T ' InkManager 的 CanPasteFromClipboard 
属性。 


项目 ： InkEraseSelect I 文件： MainPage.xaml.cs < 片段） 
public sealed partial class MainPage : Page 
* 

void OnAppBarOpened(object sender, object args) 


bool isAnythingSelected » false; 






Copy 逻辑假设你不想让笔 iffli 复制到剪贴板之后仍然被选中。 Cut 和 Delete 处理程序不 
耑要处理类似情况，因为所选笔画已经消失。 

有趣的是，如果复制墨迹到剪贴板， InkManager 还会将墨迹转换为位图和增强元文件， 
闵此，这些剪 贴板格式对粘贴也 uj •用。有些程序(尤其是 Microsoft WordK 以直接从剪贴板 
读取堪迹，但从剪贴板粘贴位图的程序更常见。 

所有复制到剪贴板的墨迹中的坐标标准化为最小渲染少标为 (0, 0>，这就是为什么 
PasteFromClipboard 方法需要 Point 参数的原因。如果没有指定 Point (就是我采用的方法)， 
所粘贴的墨迹会出现在左上角。而实现粘贴功能的真正程序，耑要给用户某种方式來指定 
在页面的什么地方粘贴墨迹。类似逻辑也 uf 以用 f - 实现 InkManager 所支持的 MoveSelected 
方法。 


19.5 黄色拍纸簿 


我写本书的时候，用了很多窄横隔线的黄色标准拍纸簿。这是我最喜欢的媒介 ，町以 
用来做笔记、写想法、 Mi 出代码的相互关系以及解决数学 M 题。我+确定会为写书转而使 










用电子黄色拍纸簿，但我给电子黄色拍纸簿-个公平机会，我要写一个应用来试试。 
YellowPad 程序非商业级，但确实比本章 U 前为止出现的程序有更多的功能。 
YellowPad 支持多个! Klfli 在 HipView 控件 h ] ■见。因此，可以通过手指扫屏进行 翻豇。 
程序确保 HipView 永远小会到达集合末尾.而如果达到末尾，总是创建一个新页面。 

Yellow Pad 还会演示 InkManager 所定义的 LoadAsync 和 SaveAsync 方法，在 Suspending 
事件期间把所有页面内容保存在木地应用存储，并在下次程序运行时进行加载。 

YellowPad 冇你刚刚看到的应用栏条并加入条目，可以设 H 笔宽度并对当前页或所 
选笔_进行着色。 

为了从用户界面加强分离这种逻辑，我定义了一个名为 InkFileManager 的类。如果 
InkManager 小封闭，则 InkFileManager 派牛:自 InkManager , 而 InkFileManager 会实例化 
InkManager 以及默认 InkDrawingAttributes 对象并公开为公共 属性。 InkFileManager 还包括 
一个方法，用新的绘图属性值来31新 inkManager 。 

项 R: YellowPad I 文件： InkFileManager.cs ( 片段） 
public 


public InkFileManager(string ic 


this.InkManager = new InkManager(); 

this.InkDrawingAttributes = new InkDrawingAttributes(); 


public InkManager InkManager 

private set; 
get; 

public InkDrawingAttributes 


public void UpdateAttributes() 

( 

this.InkManager.SetDefaultDrawingAttributes(this.InkDrawingAttributes); 



InkFileManager 还包含和选择有关的几个常规仟务。 

项 H: YellowPad | 文件： InkFileManageir.es ( 片 段） 
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foreach (InkStroke inkStroke in this.InkManager.GetStrokes()) 
isAnythingSelected I *= inkStroke. Selected; 

return isAnythingSelected; 


public void UnselectAll() 

{ 

if (IsAnythingSelected) 

foreach (InkStroke inkStroke in this.InkManager.GetStrokes()) 
inkStroke.Selected = false; 

RenderAll(); 


我还把所有贝塞尔曲线渲染逻辑都移到该文件中。除了 InkManager 对象木身，渲染逻 
辑唯一需要的就是用于添加 Path 元素的 Panel 。 该重要信息通过一个名为 RenderTarget 的 
公共属性来提供。所选笔 Pi 的渲染和之前程序的一样。 

项 H: YellowPad | 文件： InkFileManager.cs ( 片段 > 
public class InkFileManager 


public Panel RenderTarget 

set; 

get; 


public void RenderAll() 

( 

this.RenderTarget.Children.Clear(); 

foreach (InkStroke inkStroke in this.InkManager.GetStrokes()) 




static void RenderBeziers(Panel panel, InkStroke inkStroke, Color color, double penSize) 

{ 

Brush brush = new SolidColorBrush(color ); 

IReadOnlyList<InkStrokeBenderingSegment> inkSegments = inkStroke.GetRenderingSegments (); 


InkStrokeRenderingSeginent inkSegment = 
BezierSegment bezierSegment = new Bezi< 








PathFigure pathFigure = new PathFigure 



pathFigure.Segments.Add(bezierSegment); 

PathGeometry pathGeometry = new PathGeometry(); 
pathGeometry.Figures.Add(pathFigure); 



最后， InkFileManager 有两个公共方法，帮助证明其名称中的“文件” （ File ) 部分。 
LoadAsync 方法加载之前保存的墨迹和设置或如果是新创建页面，则 设置默 认值。 
SaveAsync 方法把 InkManager 的当前内容以及与 InkManager 相关的笔宽度和颜色保存到 
本地 应用。 两者都利用原始传递给构造函数并保存为 ID 字符串。该 ID 字符串对程序维护 
的每个 InkFileManager 对象均为唯一。正如你将看到的，仅仅为转为字符串的索引(0、1、 
2等)。 


项目 ： YellowPad | 义件 ： InkFileManager .cs ( 片段 } 





byte [1 argb = { color.A, color.R, color.G, color.B }; 
appData["Color" + id 】 =argb; 


在 YellowPad 程序中，好个 InkFileManager 都和一个名为 YellowPadPage 的 UserControl 
派生类相关。以下是该类的 XAML 文件，包括在视觉上用黄色背景模仿标准黄色拍纸簿以 
及 朝向豇 flj 左边的两条红色竖线。 
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项目 ： YellowPad I 文件： YellowPadPage.xaml 



x : Class®"YellowPad.YellowPadPage" 

xmlns»"http: "schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x= M http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:YellowPad"> 

<Grid> 

<Viewbox> 

<Grid Name="sheetPanel" 

WidUv"816" Heights" 1056" 

Bac kground-"# FFFF8 0 •• > 

<Line Stroke="Red" Xl="132" Y1="0" X2="132” Y2-"1056" /> 

〈Line Stroke="Red" Xl="138" Y1="0" X2="138" Y2="1056" /> 

<Grid Name="contentGrici” /> 

<Grid Name="newLineGrid" /> 

</Grid> 

</Viewbox> 

</Grid> 

</UserControl> 

控件集成了一个 Viewbox , 可以适应任何大小的窗口。 

从两个内部 Grid 元素的名称可以猜到，代码隐藏文件负责处理所有指针输入。然而. 
我发现在一台没有笔的设备上运行该程序是有问题的。记住， YellowPadPage 实例在 
Hip View 里，而 FlipView 想用其自己的触控输入来改变所选项。我决 定去除 允许在没有笔 
的情况下运行程序的逻辑。结果， YellowPad 程序还是认为是在使用的真正的笔。 
YellowPadPage 构造函数负责在贞面[:绘制蓝色分隔线。 

项 H: YellowPad | 文件： YellowPadPage.xaml.cs ( 片段 > 
public YellowPadPage() 

( 

this.InitializeComponent(); 

// Draw horizontal lines in blue 

Brush blueBrush - new SolidColorBrush(Colors.Blue); 


For (int y = 120; y < sheetPanel.Height; y += 24) 
sheetPanel.Children.Add(new Line 
( 

XI = 0, 
yi = y, 

X2 = sheetPanel.Width, 

Y2 = y. 

Stroke - blueBrush 

}); 


YellowPadPage 控件还定义了一个新的 InkFileManager 类甩依赖属性。以卜为系统开 
销。 


项 FI: YellowPad | 文件： YellowPadPage.xaml.cs ( 片段 > 
public sealed partial class YellowPadPage : UserControl 
{ 

static readonly DependencyProperty inkFileManagerProperty * 

DependencyProperty.Register("InkFileManager", 

typeof(InkFileManager), 
typeof(YellowPadPage), 

new PropertyMetadata (null. On InkFi leManagerChanged)); 
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// Overhead for InkFileManager dependency property 
public static DependencyProperty InkFileManagerProperty 



public InkFileManager InkFileManager 

[ 

set { SetValue(InkFileManagerProperty, value);) 

get { return (InkFileManager)GetValue(InkFileManagerProperty); } 


static void OnlnkFileManagerChanged(DependencyObject obj, 

DependencyPropertyChangedEventArgs args) 

{ 

(obj as YellowPadPage).OnlnkFileManagerChanged(args); 


async void OnlnkFileManagerChanged(DependencyPropertyChangedEventArgs args) 



await this.InkFileManager.LoadAsync(); 

this.InkFileManager.RenderTarget = contentGrid; 

this.InkFileManager.RenderAll(); 



如果把该 InkFileManager 属性设置为一个新的 InkFileManager 实例，属性更改处理程 
序就调用 LoadAsync 加载任何现有的壤迹和设 S ,把 RenderTarget 设置为自身的 
contentGrid , 然后将 InkFileManager 渣染之前就有的所有堪迹。 

YellowPadPage 的其余部分假定该 InkFileManager 属性已经设 S 并致力丁•处理 Pointer 
事件。除了通过 InkFileManager 属性获得 InkManager 和与该页面相关的 
InkDrawingAttributes 对象以及渲染笔画，逻辑和之前看到的程序几乎相同。 

项 YellowPad | 文件： YellowPadPage.xaml.cs ( 片 段） 
public sealed partial class YellowPadPage : UserControl 


Dictionary<uint, Point> pointerDictionary - new Dictionary<uint, Point>(); 
Brush selectionBrush = new SolidColorBrush(Colors.Red); 

protected override void OnPointerPressed(PointerRoutedEventArgs args) 

( 

if (args.Pointer.PointerDeviceType = PointerDeviceType.Pen) 



InkManager inkManager = this.InkFileManager.InkManager; 


// Initialize for inking, erasing, or selecting 
if (pointerPoint.Properties.IsEraser) 


inkManager.Mode = InkManipulationMode.Erasing; 
this.InkFileManager.UnselectAll(); 



inkManager.Mode = InkManipulationMode.Selecting; 
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interPoint to InkManager 
» inkManager. ProcessPointerllpdate (point); 












pointerDictionary.Remove(id); 
newLineGrid.Children.Clear(); 
this.InkFileManager.RenderAll(); 



YellowPadPage 通过数据绑定获得 InkFileManager 实例 。 MainPage 屮的 FlipView 控件 
包 InkFileManager 对象集合(每 个奴面一个) FlipView 的 ltemTemplate 受绑定到控件的 
ItemsSource 条 LI 的 YellowPadPage 支 Sd (尽管不是用标记来敁不-)。 











_ 


</Page.Resources> 


c:Key="indexToPageNumber" 


d Background-"{StaticResource ApplicationPageBackgroundThemeBrush)" 
<FlipView Name="flipView" 

SelectionChanged="OnFlipViewSelectionChanged" 

<FlipView•ItemTemplate> 

<DataTemplate> 

<Grid HorizontalAlignment= M Center" 
VerticalAlignment="Center"> 


<TextBlock Name="pageNumTextBlock" 

Horizonta1A1ignment-"Right M 
VerticalAlignment="Top" 



Text="(Binding ElementName=flipView, 
Path»SelectedIndex, 

Converter®(StaticResource indexToPageNumber})" /> 



<Page.BottomAppBar> 


</Page•BottomAppBar> 

</Page> 

DataTemplate 中定义的 TextBlock 连同 YellowPadPage 显示当前 页码。 Text 属性的绑定 
引用一个特定绑定转换器，后者把从零开始的索引转换为文本标签。 

项 H: YellowPad | 文件 ： IndexToPageNumber Converter. cs 
using System; 

using Windows.UI.Xaml.Data; 



public class IndexToPageNumberConverter : IValueConverter 



正如你看到的，每个 InkFileManager 实例保存并恢复与该页面相关的应用设胃，包括 
贞面的墨迹内容。 MainPage 代码保存并恢复与应用自身的相关的设資。两个整 数项： 页 |fij 
数單 :( 即 InkHleManager 对象集合的项 |j 数最) 和当前奴面索引(即 FlipView 的 Selectedlndex 
属性 


项 fl: YellowPad I 文件： MainPage.xaml .cs ( 片 段 ) 
public sealed partial class MainPage : Page 
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inkFileManagers = 
new ObservableCollection<InkFileManager>(); 


public MainPageO 


this.InitializeComponent(); 
Loaded += OnMainPageLoaded; 
Application.Current.Suspending 


OnApplicationSuspending; 



注意， Loaded 处理程序为当前页面数最创建所有 InkFileManager 对象，但 
InkFileManager 构造函数只创建 InkManager 和 InkDrawingAttributes 实例。没有加载任何之 
前保存的墨迹。 InkFileManager 实例实际绑定到 YellowPadPage 才加载任何之前保存的項 
迹。记住， FlipView 的条目面板为 VirtualizingStacIcPanel, 只为其需要的条目创建町视树。 
也就是说，加载之前保 存的墨 迹需要延伸一段较长时间，并发生在用户浏览不同页面期间。 
一些页面可能 根本+ 加载，而+加栽的!面则不需要再保存。 










程序的剩余部分致力于处理应用栏上的按钮，包括你看过的有缺陷的 Paste 逻辑。除了 
四个剪贴板相关的按钮之外，应用栏还包括两个非常相似的模板化 ComboBox 控件，一 
个用于笔的宽度，另一 个用丁 •笔的颜色。 


项 YellowPad I 文件： MainPage.xaml ( 片段 > 
<AppBar Name="bottomAppBa r" 

Opened="OnAppBarOpened n > 

<Grid> 

<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Left 


<Button Name="copyAppBarButton •’ 

Style="iStaticResource CopyAppBarButtonStyle}" 
Click="OnCopyAppBarButtonClick" /> 


"cutAppBarButton" 

="{StaticResource CutAppBarButtonStyle}" 
="OnCutAppBarButtonClick H /> 


<Button Name="pasteAppBarButton" 

Style="(StaticResource PasteAppBarButtonStyle J" 
Click="OnPasteAppBarButtonClick n /> 


<Button Name="deleteAppBarBut ton" 

Style="(StaticResource DeleteAppBarButtonStyle)" 
Click="OnDeleteAppBarButtonClick" /> 

</StackPanel> 


<StackPanel Orientation-^Horizontal" 

HorizontalAlignment="Right"> 
〈ComboBox Name= M penSizeComboBox" 




Stroke*= M Black" 

StroJceStartLineCap» M Round" 

StrokeEndLineCap="Round" 

Data= M M 0 0 C 50 20 100 0 150 20" 
</DataTemplate> 

</ComboBox.ItemTemplate> 

</ComboBox> 


<ComboBox 


>oBox Name="colorComboBox" 

SelectionChanged="OnColorComboBoxSelectionChanged" 
Width="200" 

Margin ="20 0 "> 

<Color>#FF0000</Color> 

<Color>#800000</Color> 

<Color>#FFFF00</Color> 

<Color>#808000</Color> 

<Color>#00FF00</Color> 

<Color>#008000</Color> 

<Color>#00FFFF</Color> 

<Color>#008080</Color> 

<Color>#0000FF</Color> 

<Color>#000080</Color> 
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<Color>#FF00FF</Color> 

<Color>#800080</Color> 

<Color>#C0C0C0</Color> 

<Color>#808080</Color> 

<Color>#404040</Color> 

<Color>#000000</Color> 


<ComboBox.ItemTemplate> 

<DataTemplate> 

〈Path StrokeThickness="6" 

StrokeStartLineCap="Round" 

StrokeEndLineCap="Round" 

Data="M 0 0 C 50 20 100 0 150 20"> 
<Path.Stroke> 

<SolidColorBrush Color="{Binding}" 


</Path> 

</DataTemplate> 
c/ComboBox.ItemTemplate> 


</StackPanel> 

</Grid> 

</AppBar> 


为了保持程序简笮，我没有实现对竖屏或辅屏模式进行调整的相应功能。这些模式会 
导致按钮和组合框重叠。 

应用栏条 tl 适用于显示在 FlipView 中的当前页。此外，两个 ComboBox 控件可能适用 
于员面，也就是说，适用 T - 该页曲'与当前 InkFileManager 相关的 InkDrawingAttributes 对象， 
或荠适用于页面 k 选中的条 H 。 打开应用栏时，这些控件必须适当初始化。 


项 R: YellowPad | 文件： MainPage.xaml .cs ( 片段 > 
void OnAppBarOpened(object sender, object ar< 


InkFileManager 


(InkFileManager) f 1 ipView.SelectedItern; 




penSizeComboBox.Selectedlte 
colorComboBox.SelectedItem 


=(size.Width + size.Height) / 2 ; 

InkFileManager.InkDrawingAttributes. 


penSizeComboBox.SelectedItem 
colorComboBox.SelectedItem = 


此方法更复杂的版本会循环所选笔 _ 并确定它们是否都有相同的颜色或宽度。如果是， 
这些值就可以用来初始化两个 ComboBox 控件。现在，如果选择笔画，毎个 ComboBox 没 
有赋 f 所选值。 

除了必须通过从 FlipView 的 Selectedltem 属性提供的 InkFileManager 访问 InkManager , 
处观四个剪贴板项都非常类似于之前的程序。 


项 H: YellowPad | 文件： MainPage.> 
public sealed partial class Main 


cs ( 片 段） 
: Page 








InkFileManager 
inkFileManager. 


,ager = (InkFileManager) f lipView. Selectedl tern; 
.CopySelectedToClipboardO; 


__ 1 - **^' 4 ^ .. 


inkFileManager.RenderAll(); 
bottomAppBar.IsOpen = false; 


void OnCutAppBarButtonClick(object sender, RoutedEventArgs args) 


InkFileManager inkFileManager = (InkFileManager)flipView.Selectedltem; 

inkFileManager.InkManager.CopySelectedToClipboard(); 

inkFileManager•InkManager.DeleteSelectedO; 

inkFileManager.RenderAll(); 

bottomAppBar.IsOpen = false; 


void OnPasteAppBarButtonClick(object sender. 


InkFileManager inkFileManager = (InkFileManager)flipView.Se 
inkFileManager.InkManager.PasteFromClipboard(new Point()); 
inkFileManager.RenderAll(); 
bottomAppBar.IsOpen = false; 


void OnDeleteAppBarButtonClick(object sender. 


InkFileManager inkFileManager = (InkFileManager)flipView.Selectedltern; 
inkFileManager.InkManager.DeleteSelected(); 
inkFileManager.RenderAlK); 
bottomAppBar.IsOpen = false; 


处理两个 ComboBox 控件非常相似。在这两种情况 K ， 要么赋予 InkFileManager 的 
InkDrawingAttributes 对象新值用于未来的绘制，要么新值用来更新所 选笔傾 U 


项 H: YellowPad | 文件： MainPage.xaml .cs ( 片段） 
public sealed partial class MainPage : Page 


void OnPenSizeComboBoxSelectionChanged(object sender. SelectionChangedEventArgs args) 


if (penSizeComboBox.Selectedltem 
return; 


(InkFileManager)flipView.Selectedltem; 


double penSize = (double)penSizeComboBox.Selectedltem; 
Size size - new Size(penSize, penSize); 


if (! inlcFileManager. IsAnythingSelected) 


r.InkDrawingAttributes.Sis 
:. UpdateAttributes(); 


foreach (InkStroke inkStroke ir 
if (inkStroke.Selected) 


r•InkManager.GetStrokes()J 


InkDrawingAttributes 


inkStroke.C 
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inkFileManager.InkDrawingAttributes.Color = color; 
inkFileManager.UpdateAttributes(); 


foreach (InkStroke inkStroke in inkFileManager.InkManager.GetStrokes()) 
if (inkStroke.Selected) 

( 

InkDrawingAttributes drawingAttrs = inkStroke.DrawingAttributes; 

drawingAttrs.Color = color; 

inkStroke.DrawingAttributes = drawingAttrs; 

} 

inkFileManager.RenderAll(); 


程序当然还存在一些缺陷。例如，可以为当前页面或所选笔画设胃颜色和笔的宽度， 
但小能设霄值用于所有将来新建的页面。每个新豇面会从 InkFileManager 类 里默认 的硬编 
码开始。 

程序真正需要的是 GridView 控件，用于 M 示所有页面的缩略图并允许你可以在浏览页 
面或选择页面进行删除或打印，甚至分组页面。 

但是，这就是软件的本质。软件从来不会真正完成，因为不需要完成，在这方曲，它 
和书很不一样。 








